/* Shared DPF preview identity. Load after page-specific styles.
   No script, state, locale, input, delivery or checkout contract changes. */
:root{
  --dpf-canvas:#ffffff;
  --dpf-ink:#192129;
  --dpf-muted:#525e69;
  --dpf-rule:#d5dae0;
  --dpf-well:#f4f6f8;
  --dpf-accent:#be3a28;
  --dpf-accent-hover:#9f2c1d;
  --dpf-control:#66717d;
  --dpf-focus:#174b70;
  --dpf-error:#922a35;
  --dpf-font:"IBM Plex Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --dpf-mono:ui-monospace,"SFMono-Regular",Consolas,monospace;
  --ink:var(--dpf-ink);--muted:var(--dpf-muted);--paper:var(--dpf-canvas);
  --green:var(--dpf-ink);--line:var(--dpf-rule);--accent:var(--dpf-accent);
}
body{background:var(--dpf-canvas);color:var(--dpf-ink);font:16px/1.55 var(--dpf-font)}
a{color:inherit;text-underline-offset:.2em}
nav{max-width:1184px;padding:24px 32px;gap:20px;border-bottom:1px solid var(--dpf-rule)}
nav a{min-width:0}
nav .brand{letter-spacing:-.02em;font-weight:700}
main{max-width:1184px;padding:56px 32px;margin-inline:auto}
h1,h2,h3{overflow-wrap:anywhere}
h1{font-size:clamp(32px,4.8vw,64px);line-height:1.04;letter-spacing:-.045em;font-weight:700;margin:16px 0 22px;max-width:17ch}
h2{font-size:clamp(24px,3.2vw,36px);line-height:1.12;letter-spacing:-.03em;font-weight:700}
h3{font-size:21px;line-height:1.25;letter-spacing:-.02em}
p{max-width:66ch}
.lead{font-size:19px;line-height:1.55;color:var(--dpf-muted);max-width:48ch}
.eyebrow,.step{font:12px/1.55 var(--dpf-mono);color:var(--dpf-muted);letter-spacing:.075em;text-transform:uppercase}
.eyebrow{display:inline-block;border-left:3px solid var(--dpf-accent);padding-left:10px}
.small,.subtle,.notice,.review-only{color:var(--dpf-muted)}
.small,.subtle{font-size:13px;line-height:1.6}
.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.hero>*,.split>*,.calc-summary>*,.settings>*,.cards>*,.catalog-item>*{min-width:0}
.split,.calc-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cards article{border-top:2px solid var(--dpf-ink);padding-top:16px}
.section{padding:44px 0;margin-top:44px;border-color:var(--dpf-rule)}
.button,button{font:600 15px/1.45 var(--dpf-font);padding:12px 16px;min-height:46px;border-radius:2px;border:1px solid var(--dpf-accent);background:var(--dpf-accent);color:#fff;text-decoration:none;white-space:normal;max-width:100%}
.button.secondary{background:#fff;color:var(--dpf-ink);border-color:var(--dpf-control)}
.button:hover,button:not(:disabled):hover{background:var(--dpf-accent-hover);border-color:var(--dpf-accent-hover);color:#fff}
.button.secondary:hover{background:var(--dpf-well);border-color:var(--dpf-ink);color:var(--dpf-ink)}
button:disabled,.buybox button:disabled{opacity:1;background:var(--dpf-well);color:var(--dpf-muted);border:1px solid var(--dpf-control);cursor:default}
a[aria-disabled="true"]{opacity:1;color:var(--dpf-muted);border-color:var(--dpf-control)}
.actions{gap:10px;margin-top:22px}
.actions>*{min-width:0;max-width:100%}
.paper,.buybox,.card,.catalog-item,.workflow-demo,.crochet-product .crochet-demo,.demo-outcome,.workflow-preview{border-radius:2px;box-shadow:none}
.paper{background:var(--dpf-well);border:1px solid var(--dpf-rule);padding:24px}
.receipt{transform:none}
.receipt h3{font-size:22px}
.receipt dl div{gap:4px 16px;border-color:var(--dpf-rule)}
.receipt dd{font-family:var(--dpf-mono);font-size:15px;font-variant-numeric:tabular-nums}
.receipt .total{font-size:20px;border-top:2px solid var(--dpf-ink);margin-top:12px}
.receipt .total dd{font-size:24px;letter-spacing:-.04em}
.tag{background:var(--dpf-well);color:var(--dpf-ink);border:1px solid var(--dpf-rule);padding:3px 7px;border-radius:2px;font:11px/1.5 var(--dpf-mono);letter-spacing:.02em}
.price{font:700 36px/1.15 var(--dpf-font);color:var(--dpf-ink);letter-spacing:-.04em}
.buybox{background:var(--dpf-well);color:var(--dpf-ink);border:1px solid var(--dpf-rule);padding:24px}
.buybox .small{color:var(--dpf-muted)}
.buybox button{background:var(--dpf-accent);color:#fff;border-color:var(--dpf-accent)}
.notice{background:var(--dpf-well);border-bottom:1px solid var(--dpf-rule);padding:10px 20px;font-size:12px}
.catalog-grid{display:block}
.catalog-item{display:grid;grid-template-columns:minmax(0,1fr) 192px;gap:8px 28px;padding:28px 0;border:0;border-top:1px solid var(--dpf-rule);background:#fff}
.catalog-item>*{grid-column:1;margin-block:0}
.catalog-item>.tag{justify-self:start}
.catalog-item h3{font-size:25px;margin-top:2px}
.catalog-item ul{padding-left:19px;margin:4px 0;display:flex;flex-wrap:wrap;gap:4px 28px;font-size:13px;color:var(--dpf-muted)}
.catalog-item .price{grid-column:2;grid-row:1/span 3;justify-self:end;align-self:start;font-size:32px}
.catalog-item .actions{grid-column:2;grid-row:4/span 5;align-self:start;display:flex;flex-direction:column;margin-top:0}
.catalog-item .actions .button{font-size:13px;padding:10px 12px;min-height:42px;text-align:center}
.catalog-item [data-sales-state]{font-size:12px;border-left:2px solid var(--dpf-control);padding-left:8px}
.calc,.workflow-demo,.crochet-product .crochet-demo{background:var(--dpf-well);border:1px solid var(--dpf-rule);padding:24px}
.calc label,label{color:var(--dpf-ink)}
input,select,textarea{font:16px/1.4 var(--dpf-font);border:1px solid var(--dpf-control);border-radius:2px;background:#fff;color:var(--dpf-ink);min-width:0;max-width:100%;padding:10px 12px}
input:not([readonly]):not([type="checkbox"]){border-left:3px solid var(--dpf-accent)}
input[readonly]{background:var(--dpf-well);color:var(--dpf-ink)}
input[type="checkbox"]{accent-color:var(--dpf-accent)}
.settings,.inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
td,th{border-color:var(--dpf-rule)}
th{color:var(--dpf-muted)}
.result,.demo-outcome{background:var(--dpf-ink);color:#fff;border-radius:2px;padding:22px}
.result strong{font:700 clamp(24px,4.5vw,36px)/1.25 var(--dpf-mono);letter-spacing:-.04em;overflow-wrap:anywhere}
.result p,.result .subtle,.demo-outcome p{color:#e4e8ec}
.result .tag{background:transparent;color:#fff;border-color:#a4adb7}
/* Match/outweigh legacy Rate .result a.button and its aria-disabled rule. */
.result .button,.result a.button{background:#fff;color:var(--dpf-ink);border-color:#fff}
.result a.button:hover{background:var(--dpf-well);color:var(--dpf-ink);border-color:var(--dpf-control)}
.result a.button[aria-disabled="true"],.result a.button[aria-disabled="true"]:hover{background:#fff;color:var(--dpf-muted);border-color:var(--dpf-control);opacity:1;cursor:default}
.error,#error{color:var(--dpf-error)}
.preview img,.preview-grid img,.crochet-product .preview-grid img{display:block;width:100%;height:auto;max-width:100%;border:1px solid var(--dpf-rule);filter:none}
.preview figcaption,.crochet-product figcaption{color:var(--dpf-muted);line-height:1.6}
.workflow-preview{border-color:var(--dpf-accent);background:var(--dpf-well)}
.workflow-sample-label{color:var(--dpf-ink)}
.workflow-product .paper dt{color:var(--dpf-muted)}
.crochet-product .demo-metrics>div{background:#fff;border-color:var(--dpf-rule);border-radius:2px}
.crochet-product .demo-metrics .purchase,.crochet-product .demo-metrics .residual{border-left-color:var(--dpf-ink)}
.crochet-product .demo-controls,.crochet-product .demo-metrics,.crochet-product .preview-grid,.preview-grid,.offer{grid-template-columns:repeat(2,minmax(0,1fr))}
.crochet-product select{background:#fff;border-color:var(--dpf-control)}
header{background:var(--dpf-canvas);color:var(--dpf-ink);border-bottom:1px solid var(--dpf-rule)}
.card{background:#fff;border-color:var(--dpf-rule)}
.card.result{background:var(--dpf-ink);color:#fff}
.grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.grid>*{min-width:0}
.rate{font-family:var(--dpf-mono)}
.demo-screen{background:var(--dpf-ink);border-radius:2px;color:#fff}
.demo-screen .eyebrow{color:#fff}
.demo-screen strong{font-size:clamp(24px,5vw,44px)}
.consent{background:#fff;border:2px solid var(--dpf-control);border-radius:2px;box-shadow:none;max-width:min(460px,calc(100vw - 32px));left:16px;right:16px;bottom:16px}
.consent .decline{background:#fff;color:var(--dpf-ink);border-color:var(--dpf-control)}
:focus-visible,input:focus,select:focus,button:focus,a:focus,.crochet-product select:focus-visible,.crochet-product a:focus-visible{outline:3px solid var(--dpf-focus);outline-offset:3px}
.result :focus-visible,.result a:focus,.result a:focus-visible,.result a.button:focus,.result a.button:focus-visible,.result button:focus,.result button:focus-visible,.result input:focus,.result input:focus-visible,.result select:focus,.result select:focus-visible,
.demo-outcome a:focus,.demo-outcome a:focus-visible,.demo-outcome button:focus,.demo-outcome button:focus-visible,.demo-outcome input:focus,.demo-outcome select:focus,
.demo-screen a:focus,.demo-screen a:focus-visible,.demo-screen button:focus,.demo-screen button:focus-visible,.demo-screen input:focus,.demo-screen select:focus{outline:3px solid #fff;outline-offset:3px}
footer{border-color:var(--dpf-rule);color:var(--dpf-muted)}
.dpf-logo{display:block;width:104px;height:32px;color:var(--dpf-ink);flex:none}
.dpf-logo .logo-accent{fill:var(--dpf-accent)}
.brand-lockup{display:flex;align-items:center;gap:16px;color:var(--dpf-ink);font-weight:700;font-size:14px;line-height:1.15;letter-spacing:-.02em}
@media screen and (max-width:800px){
  main{padding:32px 20px}nav{padding:18px 20px;gap:16px}
  h1{font-size:clamp(32px,7vw,46px)}
  .hero,.split,.calc-summary,.cards,.grid,.offer,.preview-grid,.crochet-product .preview-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .paper,.buybox,.calc{padding:20px}
  .receipt dl>div{flex-wrap:wrap;gap:4px 12px}.receipt dd{margin-left:auto}
  .section{margin-top:32px;padding:32px 0}
}
@media screen and (max-width:600px){
  main{padding-inline:16px}nav{padding-inline:16px}
  .catalog-item{grid-template-columns:minmax(0,1fr);padding:24px 0;gap:8px}
  .catalog-item .price{grid-column:1;grid-row:auto;justify-self:start;margin-top:6px;font-size:28px}
  .catalog-item .actions{grid-column:1;grid-row:auto;flex-direction:row;flex-wrap:wrap;margin-top:8px}
  .catalog-item .actions .button{flex:1 1 170px}
  .settings,.inputs,.crochet-product .demo-controls,.crochet-product .demo-metrics{grid-template-columns:minmax(0,1fr)}
  .calc .table-wrap tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calc .table-wrap td{min-width:0}.calc .table-wrap td input{min-width:0}
  .result,.paper,.buybox,.calc,.card{padding:18px}
  .actions .button,.actions button{flex:1 1 180px}
  footer{padding-inline:16px;flex-wrap:wrap}
  .brand-lockup{gap:10px;font-size:12px}.dpf-logo{width:78px;height:24px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
@media print{
  body,header,main,.paper,.buybox,.calc,.card,.result,.demo-outcome,.workflow-demo,.crochet-product .crochet-demo{background:#fff;color:#000;box-shadow:none}
  nav,footer,.notice,.consent,button,.actions,.review-controls{display:none}
  main{padding:0;max-width:none}.section{margin:0;padding:16px 0}
  .receipt{transform:none}.receipt dl>div{flex-wrap:wrap}.receipt dd{margin-left:auto}
  .result p,.result .subtle,.demo-outcome p,.small,.subtle{color:#222}
  .result .tag{background:#fff;color:#000;border-color:#555}
  .result a.button,.result a.button:hover,.result a.button[aria-disabled="true"],.result a.button[aria-disabled="true"]:hover{background:#fff;color:#000;border-color:#555;opacity:1}
  .catalog-item,.paper,.buybox,.calc,.card{border-color:#555}
  .dpf-logo .logo-accent{fill:currentColor}
  input,select,textarea{background:#fff;color:#000;border-color:#555}
  a{color:#000}
}


/* Official unmodified IBM Plex fonts; see /assets/fonts/LICENSE.txt. */
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
:root{--dpf-font:"IBM Plex Sans",Arial,"Helvetica Neue",Helvetica,sans-serif}
h1,h2,h3,.price,.brand-lockup{font-weight:600}
nav{flex-wrap:wrap}
.brand-lockup{min-width:0;max-width:100%}.dpf-brand-name{min-width:0;max-width:140px}
.result a.button{color:var(--dpf-ink);background:#fff;border-color:#fff;opacity:1}
.result a.button:hover{color:#fff;background:var(--dpf-accent-hover);border-color:var(--dpf-accent-hover)}
.result a.button[aria-disabled="true"]{opacity:1;color:var(--dpf-muted);background:var(--dpf-well);border-color:var(--dpf-control)}
.result :is(a,button,input,select,textarea):focus,.result :is(a,button,input,select,textarea):focus-visible,.demo-outcome :is(a,button,input,select,textarea):focus,.demo-outcome :is(a,button,input,select,textarea):focus-visible,.demo-screen :is(a,button,input,select,textarea):focus-visible{outline:3px solid #fff;outline-offset:3px}
@media print{.result .tag{color:#000;background:#fff;border-color:#555}.dpf-logo{filter:grayscale(1)}}

@media print{.card.result{background:#fff;color:#000}.card.result .rate,.card.result strong{color:#000}}
