/* Page styles for design-covestro.html.
   Extracted from the inline <style> blocks on 2026-09-11, byte for byte and in
   the same order, and linked from the same position in the head. The cascade is
   unchanged; what changed is that the CSS is now a file the browser can cache
   and a person can read. */

/* ============================================================
       Covestro, Soft Touch Explorer case.
       Layout scaffold matches the other design cases (obseed/Heineken):
       dc-shell > dc-grid > dc-main + sticky dc-toc. Component classes
       (dc-cards/dc-rows/dc-wins) are shared with those cases. Bespoke here:
       the H-bar design-system ramp + component specimens (hb- and hbc-
       classes, drawn from finanzcheck-app.html tokens) and the embedded
       prototype iframe.
    ============================================================ */
    :root{
      /* Page chrome: ONE restrained, desaturated accent for the case page and its
         diagrams, matched to the siblings' quietness (obseed #c8533f, scout #3f8d5a).
         The bright product palette lives ONLY in the design-system swatches, the
         component specimens, and the embedded prototype, never on the page chrome. */
      --page-accent:#7D55C7; --page-accent-strong:#5f3ba6; --page-accent-wash:#f4f0fb;
      --page-text-muted:#6c788d; --page-border:#e6eaf1;
      /* Product design-system tokens, mirrored 1:1 from finanzcheck-app.html so the
         documented swatches and specimens match the rebuilt prototype below. */
      --color-primary:#1F50B5; --color-primary-hover:#2E6BE6; --color-primary-active:#18409A;
      --color-primary-strong:#16204A; --color-primary-surface:#EAF1FC;
      --color-success:#12805A; --color-success-surface:#E6F4EE; --color-success-strong:#155E46; --color-success-border:rgba(18,128,90,.14);
      --color-warning:#B7791F; --color-warning-surface:#FBF3E2; --color-warning-strong:#7C5410; --color-warning-border:rgba(183,121,31,.16);
      --color-danger:#C2342B; --color-danger-surface:#FDECEC;
      --color-text:#0A0F1A; --color-text-secondary:#39425A; --color-text-muted:#5A6575; --color-text-subtle:#8A93A2;
      --color-surface:#FFFFFF; --color-background:#F4F6FA; --color-border:#E9ECF1; --color-border-subtle:#EEF1F6;
      --shadow:0 1px 1px rgba(16,30,60,.03),0 2px 8px -3px rgba(16,30,60,.06),0 20px 42px -22px rgba(16,30,60,.18);
    }
    /* ---- shared case scaffold (ported from design-obseed) ---- */
    :root{ --page-measure:1100px; --page-pad:clamp(26px,6vw,40px); }
    :root{ --page-measure:1100px; --page-pad:clamp(26px,6vw,40px); }
  .dc-shell{ max-width:var(--page-measure,1100px); margin:0 auto; padding:0 var(--page-pad,clamp(26px,6vw,40px)); }
    .dc-grid{ display:grid; grid-template-columns:minmax(0,1fr) 132px; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
    .dc-main{ min-width:0; }
    @media(max-width:900px){ .dc-grid{ grid-template-columns:1fr; } .dc-toc{ display:none; } }

    .case-hero__crumb{ font-size:13px; margin:0 0 clamp(20px,3vw,30px); }
    .case-hero__crumb a{ color:var(--ink3); text-decoration:none; }
    .case-hero__crumb a:hover{ color:var(--ink); }

    .dc-sec{ padding:var(--sp-3) 0; }
    .dc-sec:first-child{ border-top:0; }
    .dc-sec__num{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:12px; color:var(--ink3); letter-spacing:.04em; }
    .dc-sec__h{ font-family:var(--font); font-size:clamp(1.3rem,2.2vw,1.65rem); font-weight:600; letter-spacing:-.015em; line-height:1.18; color:var(--ink); margin:.45rem 0 1rem; }
    .dc-sec__p{ font-size:clamp(1rem,1.2vw,1.0625rem); line-height:1.66; color:var(--ink2); max-width:64ch; margin:0 0 1rem; }
    .dc-sec__p strong{ color:var(--ink); font-weight:600; }

    .dc-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:1.6rem; }
    .dc-cards--2{ grid-template-columns:repeat(2,1fr); }
    @media(max-width:720px){ .dc-cards{ grid-template-columns:1fr; } }
    .dc-card{ border:1px solid var(--rule); border-radius:16px; padding:clamp(16px,2vw,20px); background:#fff; }
    .dc-card__k{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing: 0.02em; color:var(--page-accent); margin:0 0 9px; }
    .dc-card__t{ font-size:1.0625rem; font-weight:600; color:var(--ink); margin:0 0 7px; line-height:1.25; }
    .dc-card__d{ font-size:.92rem; color:var(--ink2); line-height:1.55; margin:0; }
    .dc-card--accent{ border-color:color-mix(in srgb,var(--page-accent) 28%,var(--rule)); background:linear-gradient(180deg,var(--page-accent-wash),#fffefd); }
    .dc-card--accent .dc-card__k{ color:var(--page-accent); }


    /* The derivation. The four metaphors are the one part of this system that
       came from outside design, so the page shows where each one came from
       rather than only naming it. Line drawings, not the macro plates: those
       arrive later and the reveal should not be spent twice. */
    .dcv-der{ margin:1.9rem 0 .4rem; }
    .dcv-der__head{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1rem,4vw,2.6rem); padding:0 0 .7rem; font-family:"JetBrains Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.04em; color:var(--ink3); }
    .dcv-der__row{ display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1rem,4vw,2.6rem); align-items:center; padding:clamp(.85rem,2vw,1.1rem) 0; border-top:1px solid var(--rule); }
    .dcv-der__row:last-child{ border-bottom:1px solid var(--rule); }
    .dcv-der__from{ display:flex; align-items:center; gap:15px; font-size:1.0625rem; line-height:1.4; color:var(--ink2); }
    .dcv-der__from svg{ width:32px; height:32px; flex:none; color:var(--page-accent); }
    .dcv-der__to{ font-size:1.0625rem; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:11px; }
    .dcv-der__to i{ font-style:normal; color:var(--ink3); font-weight:400; flex:none; }
    .dcv-der__note{ font-size:.94rem; line-height:1.6; color:var(--ink3); margin:1rem 0 0; max-width:58ch; }
    @media(max-width: 720px){
      .dcv-der__head{ display:none; }
      .dcv-der__row{ grid-template-columns:1fr; gap:.5rem; }
      .dcv-der__to{ padding-left:47px; }
    }


    .dc-wins{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:12px; }
    .dc-wins li{ display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:start; font-size:1.0625rem; color:var(--ink2); line-height:1.5; }
    .dc-wins li strong{ color:var(--ink); font-weight:600; }
    .dc-wins .tick{ width:22px;height:22px;border-radius:50%; background:var(--ink); display:flex;align-items:center;justify-content:center; flex:0 0 auto; margin-top:1px; }
    .dc-wins .tick svg{ width:12px;height:12px;stroke:#F5EFE2;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; }

    .dc-note{ font-size:.9rem; color:var(--ink3); border-left:2px solid var(--page-accent); padding:3px 0 3px 15px; margin:1.5rem 0 0; max-width:62ch; line-height:1.6; }

    /* ---- hero: solid title + 2-col meta, matching obseed/Heineken ---- */
    .dc-results__k--pos{ color:var(--page-accent); } .dc-results__k--warn{ color:var(--page-accent); }

    /* ---- shared design-system spread (same .dsx pattern as the sibling cases) ---- */
    .hb-num{ font-variant-numeric:tabular-nums; }

    /* each component sits on a white app card with soft elevation, floating on the
       #F4F6FA screen (the grey .dsx-spec__b inset), exactly like the rebuilt prototype */
    .hb-stage{ background:var(--color-surface); border:1px solid rgba(16,30,60,.05); border-radius:22px; padding:16px; box-shadow:var(--shadow); font-family:"Inter",var(--font); color:var(--color-text); -webkit-font-smoothing:antialiased; }
    .hb-ey{ font-size: 11px; font-weight:700; letter-spacing: 0.02em; color:var(--color-text-muted); }

    /* specimen: balance header */
    .hbc-bal__top{ display:flex; justify-content:space-between; align-items:flex-start; }
    .hbc-bal__v{ font-size:38px; font-weight:800; letter-spacing:-.04em; color:var(--color-text); line-height:.92; margin-top:6px; }
    .hbc-bal__v small{ font-size:14px; font-weight:600; color:var(--color-text-subtle); }
    /* semantic pills (success / attention), mirrored from the prototype .pill */
    .hbc-pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; letter-spacing:-.01em; white-space:nowrap; }
    .hbc-pill .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
    .hbc-pill--pos{ color:var(--color-success); background:var(--color-success-surface); }
    .hbc-pill--warn{ color:var(--color-warning); background:var(--color-warning-surface); }
    .hbc-bar{ height:6px; background:var(--color-border-subtle); border-radius:3px; margin-top:16px; overflow:hidden; }
    .hbc-bar i{ display:block; height:100%; width:39%; background:linear-gradient(90deg,var(--color-primary),var(--color-primary-hover)); border-radius:3px;
      transition:width 700ms var(--ease-quint); }
    .hbc-bar__e{ display:flex; justify-content:space-between; font-size:11px; color:var(--color-text-muted); font-weight:500; margin-top:9px; }

    /* semantic story nudges (success / attention), mirrored from the prototype .story */
    .hbc-nudge{ display:flex; gap:9px; align-items:flex-start; padding:12px 13px; border-radius:14px; }
    .hbc-nudge + .hbc-nudge{ margin-top:10px; }
    .hbc-nudge svg{ flex-shrink:0; margin-top:1px; }
    .hbc-nudge p{ font-size:11.5px; font-weight:500; line-height:1.45; }
    .hbc-nudge--pos{ background:var(--color-success-surface); border:1px solid var(--color-success-border); }
    .hbc-nudge--pos svg{ color:var(--color-success); } .hbc-nudge--pos p{ color:var(--color-success-strong); } .hbc-nudge--pos b{ color:var(--color-success); font-weight:700; }
    .hbc-nudge--warn{ background:var(--color-warning-surface); border:1px solid var(--color-warning-border); }
    .hbc-nudge--warn svg{ color:var(--color-warning); } .hbc-nudge--warn p{ color:var(--color-warning-strong); } .hbc-nudge--warn b{ color:var(--color-warning); font-weight:700; }

    /* specimen: payoff chart */
    .hbc-chart__h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
    .hbc-chart__h .v{ font-size:12px; font-weight:700; color:var(--color-text); }
    .hbc-chart svg{ width:100%; display:block; }
    .hbc-chart__x{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--color-text-muted); font-weight:500; margin-top:9px; }
    .hbc-chart__x .now{ color:var(--color-primary); font-weight:700; }

    /* specimen: status row */
    .hbc-status{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .hbc-status__l{ display:flex; align-items:center; gap:13px; min-width:0; }
    .hbc-status__tick{ width:34px; height:34px; border-radius:50%; background:var(--color-success-surface); display:grid; place-items:center; color:var(--color-success); flex:none; }
    .hbc-status__t{ display:block; font-size:14px; font-weight:700; color:var(--color-text); letter-spacing:-.01em; }
    .hbc-status__sub{ display:block; font-size:11.5px; color:var(--color-text-muted); font-weight:500; margin-top:2px; }
    .hbc-status__badge{ font-size:10px; font-weight:700; color:var(--color-success); background:var(--color-success-surface); padding:5px 10px; border-radius:999px; }
    .hbc-status__r{ display:flex; align-items:center; gap:8px; flex:none; }
    .hbc-status__chev{ color:var(--color-text-subtle); flex:none; }

    /* specimen: form row (live dropdown selector) */
    .hbc-frow{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 16px;
      font-family:"Inter",var(--font); text-align:left; background:none; border:0; border-top:1px solid var(--color-border); cursor:pointer; }
    .hbc-select:first-child .hbc-frow{ border-top:0; }
    .hbc-frow > span{ display:flex; flex-direction:column; gap:2px; }
    .hbc-frow__v{ font-size:16px; font-weight:700; color:var(--color-text); letter-spacing:-.01em; }
    .hbc-frow__c{ color:var(--color-text-subtle); flex:none; }
    .hbc-frow[aria-expanded="true"] .hbc-frow__c{ transform:rotate(180deg); color:var(--color-primary); }
    .hbc-frow[aria-expanded="true"] .hbc-frow__v{ color:var(--color-primary); }
    /* the popover panel, opens via grid-rows 0fr -> 1fr */
    .hbc-pop{ display:grid; grid-template-rows:0fr; }
    .hbc-select.is-open .hbc-pop{ grid-template-rows:1fr; }
    .hbc-opts{ list-style:none; margin:0; padding:0; overflow:hidden; opacity:0; transition:opacity var(--t-brisk) ease; }
    .hbc-select.is-open .hbc-opts{ opacity:1; }
    .hbc-opt{ padding:10px 16px; margin:0; border-radius:9px; font-size:14px; font-weight:600; color:var(--color-text-muted);
      letter-spacing:-.01em; cursor:pointer; display:flex; align-items:center; justify-content:space-between; }
    .hbc-opt[aria-selected="true"]{ color:var(--color-primary); }
    .hbc-opt[aria-selected="true"]::after{ content:""; width:7px; height:12px; border:solid var(--color-primary); border-width:0 2px 2px 0;
      transform:rotate(45deg); margin:-3px 4px 0 0; }

    /* specimen: action bar + primary button */
    .hbc-actionbar{ position:relative; padding-top:18px; }
    .hbc-actionbar::before{ content:""; position:absolute; left:-16px; right:-16px; top:0; height:1px; background:var(--color-border); }
    .hbc-btn{ width:100%; background:var(--color-primary); color:#fff; border:0; border-radius:15px; padding:15px; font:700 15px/1 "Inter",var(--font); letter-spacing:-.01em; text-align:center; box-shadow:0 12px 24px -12px rgba(31,80,181,.55); }

    /* specimen: tab bar */
    .hbc-tabs{ display:flex; justify-content:space-around; border-top:1px solid var(--color-border); padding-top:12px; }
    .hbc-tab{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:8px 13px 7px; border-radius:13px; font-size: 11px; font-weight:700; letter-spacing:.03em; color:var(--color-text-subtle); cursor:pointer; }
    .hbc-tab--on{ background:var(--color-primary); color:#fff; box-shadow:0 5px 12px -6px rgba(31,80,181,.33); }
    .hbc-tab svg{ width:20px; height:20px; }

    /* specimen: bottom sheet */
    .hbc-sheet{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:26px 26px 12px 12px; padding:12px 22px 18px; box-shadow:0 -8px 24px -14px rgba(16,30,60,.28); }
    .hbc-sheet__grip{ width:38px; height:4px; border-radius:2px; background:var(--color-border); margin:0 auto 16px; }
    .hbc-sheet__t{ font-size:18px; font-weight:800; letter-spacing:-.02em; color:var(--color-text); }
    .hbc-sheet__d{ font-size:13px; color:var(--color-text-muted); font-weight:500; line-height:1.5; margin-top:10px; }

    /* specimen: FAQ accordion */
    .hbc-faq__row{ border-bottom:1px solid var(--color-border); }
    .hbc-faq__row:last-child{ border-bottom:0; }
    .hbc-faq__q{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:14px 16px;
      font:500 13px/1.3 "Inter",var(--font); color:var(--color-text); text-align:left; background:none; border:0; cursor:pointer; }
    .hbc-faq__row--open .hbc-faq__q{ color:var(--color-primary); }
    .hbc-faq__q svg{ color:var(--color-text-subtle); flex:none; }
    .hbc-faq__row--open .hbc-faq__q svg{ transform:rotate(90deg); color:var(--color-primary); }
    /* answer collapses via grid-rows 0fr -> 1fr */
    .hbc-faq__a{ display:grid; grid-template-rows:0fr; }
    .hbc-faq__row--open .hbc-faq__a{ grid-template-rows:1fr; }
    .hbc-faq__a > p{ overflow:hidden; margin:0; font-size:12.5px; color:var(--color-text-muted); font-weight:500; line-height:1.55; }
    .hbc-faq__row--open .hbc-faq__a > p{ padding:0 2px 14px; }

    /* ---- specimen interactive controls: each demonstrates its real behavior ---- */

    /* primary button: hover darkens, active presses in */
    .hbc-btn{ cursor:pointer; transition:background var(--t-snap) var(--ease-quint), transform 140ms var(--ease-quint); }
    .hbc-btn:active{ transform:scale(0.97); background:var(--color-primary-active); }

    /* tab bar: smooth color + icon scale */
    .hbc-tab{ transition:background var(--t-fast) var(--ease-quint), color var(--t-fast) var(--ease-quint); }
    .hbc-tab svg{ transition:transform var(--t-brisk) var(--ease-quint); }

    /* status row: reads as a tappable status, lifts on hover */
    .hbc-status{ margin:-8px; padding:8px; border-radius:11px;
      transition:background var(--t-brisk) var(--ease-quint), transform var(--t-brisk) var(--ease-quint), box-shadow var(--t-brisk) var(--ease-quint); }
    .hbc-status__badge{ transition:transform var(--t-brisk) var(--ease-quint), background var(--t-brisk) var(--ease-quint); }
    .hbc-status__chev{ transition:transform var(--t-brisk) var(--ease-quint), color var(--t-brisk) var(--ease-quint); }

    /* form rows + FAQ rows: hover fill, chevron rotate baked into base rules above */
    .hbc-frow, .hbc-faq__q{ transition:background var(--t-snap) var(--ease-quint), color var(--t-snap) var(--ease-quint); }
    .hbc-frow{ border-radius:9px; }
    .hbc-faq__q{ border-radius:9px; }
    .hbc-frow__c, .hbc-frow__v, .hbc-faq__q svg, .hbc-opt{
      transition:transform var(--t-brisk) var(--ease-quint), color var(--t-snap) var(--ease-quint), background var(--t-snap) var(--ease-quint); }

    /* payoff chart: solid line draws in, "today" dot fades + scales in.
       Path length of the 0,6 -> 122,48 segment is ~130; round up to be safe. */
    .hbc-chart__solid{ stroke-dasharray:140; stroke-dashoffset:0;
      transition:stroke-dashoffset 640ms var(--ease-quint); }
    .hbc-chart__now{ transform-box:fill-box; transform-origin:center; opacity:1;
      transition:opacity 260ms ease 480ms, transform var(--t-base) var(--ease-quint) 460ms; }

    /* hover only for real pointers; touch must not stick hover */
    @media (hover:hover) and (pointer:fine){
      .dsx-spec:hover{ box-shadow:0 10px 28px -16px rgba(21,41,74,.30), 0 2px 6px rgba(21,41,74,.05);
        border-color:color-mix(in srgb,var(--color-primary) 26%,var(--rule)); }

      /* 1. balance bar fills from 0 to its real 39% on tile hover */
      .dsx-spec:has(.hbc-bar) .hbc-bar i{ width:0; }
      .dsx-spec:has(.hbc-bar):hover .hbc-bar i{ width:39%; }

      /* 2. chart line draws in on tile hover, dot pops at the end */
      .dsx-spec:has(.hbc-chart__solid) .hbc-chart__solid{ stroke-dashoffset:140; }
      .dsx-spec:has(.hbc-chart__solid):hover .hbc-chart__solid{ stroke-dashoffset:0; }
      .dsx-spec:has(.hbc-chart__solid) .hbc-chart__now{ opacity:0; transform:scale(.2); }
      .dsx-spec:has(.hbc-chart__solid):hover .hbc-chart__now{ opacity:1; transform:scale(1); }

      /* 3. status row lifts as a tappable list row, badge pops, chevron slides right */
      .hbc-status:hover{ background:var(--color-border-subtle); transform:translateY(-2px);
        box-shadow:0 8px 20px -14px rgba(16,30,60,.20); }
      .hbc-status:hover .hbc-status__badge{ transform:scale(1.06); }
      .hbc-status:hover .hbc-status__chev{ transform:translateX(3px); color:var(--color-text-muted); }

      /* 4. form rows + 5. button + 6. tabs + 7. FAQ hover states */
      .dsx-spec:hover .hbc-btn, .hbc-btn:hover{ background:var(--color-primary-active); }
      .hbc-tab:not(.hbc-tab--on):hover{ background:var(--color-primary-surface); color:var(--color-primary); }
      .hbc-frow:hover{ background:var(--color-primary-surface); }
      .hbc-frow:hover .hbc-frow__c{ transform:translateX(3px); color:var(--color-primary); }
      .hbc-frow[aria-expanded="true"]:hover .hbc-frow__c{ transform:rotate(180deg); }
      .hbc-frow:hover .hbc-frow__v{ color:var(--color-primary); }
      .hbc-opt:hover{ background:var(--color-primary-surface); color:var(--color-primary); }
      .hbc-faq__q:hover{ background:var(--color-primary-surface); color:var(--color-primary); }
      .hbc-faq__q:hover svg{ transform:translateX(2px); color:var(--color-primary); }
    }

    /* keyboard focus parity for the interactive specimens */
    .hbc-frow:focus-visible, .hbc-faq__q:focus-visible, .hbc-opt:focus-visible, .hbc-btn:focus-visible{
      outline:2px solid var(--color-primary); outline-offset:2px; }

    @media (prefers-reduced-motion:reduce){
      .dsx-spec, .hbc-btn, .hbc-status, .hbc-frow, .hbc-tab, .hbc-tab svg, .hbc-faq__q,
      .hbc-status__badge, .hbc-status__chev, .hbc-frow__c, .hbc-frow__v, .hbc-faq__q svg,
      .hbc-bar i, .hbc-chart__solid, .hbc-chart__now, .hbc-opts, .hbc-opt{ transition:none!important; }
      .hbc-btn:active{ transform:none!important; }
      /* keep end states visible without motion */
      .dsx-spec:has(.hbc-bar) .hbc-bar i{ width:39%; }
      .hbc-chart__solid{ stroke-dashoffset:0!important; }
      .hbc-chart__now{ opacity:1!important; transform:none!important; }
    }

    /* the embedded prototype iframe.
       The app renders in ?embed=1 mode at its exact phone size: 390 screen +
       11px frame each side = 412 wide, 844 + 22 = 866 tall. The phone's own
       rounded black frame is the visual, so the iframe is transparent and
       carries only a soft drop-shadow, no second border/box. */
    /* keep the phone clear of the fixed site nav when this section is the anchor target */
    #prototype{ scroll-margin-top:96px; }
    .proto-frame{ display:flex; justify-content:center; margin-top:2.4rem; }
    .proto-frame iframe{ width:412px; height:866px; flex:0 0 auto; border:0; border-radius:54px;
      background:transparent; transform-origin:top center;
      filter:drop-shadow(0 30px 60px rgba(21,41,74,.32)) drop-shadow(0 8px 20px rgba(21,41,74,.16)); }
    /* Below 460px the 412px phone is wider than the screen: scale the WHOLE phone down. */
    @media(max-width: 520px){ .proto-frame{ overflow:hidden; height:772px; } .proto-frame iframe{ transform:scale(.88); } }
    @media(max-width: 520px){ .proto-frame{ height:692px; } .proto-frame iframe{ transform:scale(.78); } }
    @media(max-width:360px){ .proto-frame{ height:640px; } .proto-frame iframe{ transform:scale(.72); } }
    /* Short viewports: shrink the phone with zoom (reflows the box, so it fits without a
       gap AND without clipping the drop-shadow the way overflow:hidden did). */
    @media(min-width: 520px) and (max-height:940px){ .proto-frame iframe{ zoom:0.82; } }
    @media(min-width: 520px) and (max-height:820px){ .proto-frame iframe{ zoom:0.72; } }
    @media(min-width: 520px) and (max-height:720px){ .proto-frame iframe{ zoom:0.62; } }

/* ================================================================
     Case showcase grid. One live screen, one interaction, two comps,
     one way in. Cell count equals content, no filler tile.
     ================================================================ */

  .sc{ padding-top:clamp(26px,4vw,42px); padding-bottom:clamp(52px,7vw,88px); }
  .sc__grid{ display:grid; gap:14px; grid-template-columns:1fr; }

  .cell{ position:relative; border:1px solid var(--rule); border-radius:16px;
    background:#fff; overflow:hidden; display:flex; flex-direction:column; }
  .cell__k{ margin:0; font-weight:400; font-family:"JetBrains Mono",ui-monospace,monospace; font-size: 11px;
    letter-spacing: 0.02em; color:var(--ink3);
    padding:15px 18px 0; margin:0; }
  .cell__b{ padding:14px 18px 18px; flex:1; display:flex; flex-direction:column;
    justify-content:center; min-width:0; }


  /* end-of-page way in */
  .figma-out{ padding-top:clamp(30px,4vw,52px); padding-bottom:clamp(56px,7vw,80px); }
  .figma-out__in{ background:var(--ink); border-radius:16px; padding:clamp(26px,3.4vw,40px);
    display:grid; gap:22px; align-items:end; }
  @media(min-width: 720px){ .figma-out__in{ grid-template-columns:1fr auto; gap:36px; } }
  .figma-out__h{ font-family:var(--font); font-size:clamp(1.4rem,2.4vw,2rem); font-weight:600;
    letter-spacing:-.022em; line-height:1.14; color:#F5EFE2; margin:0 0 10px; }
  .figma-out__p{ font-size:.98rem; line-height:1.55; color:rgba(245,239,226,.62);
    margin:0; max-width:52ch; }
  .figma-out__a{ justify-self:start; display:inline-flex; align-items:center; gap:9px;
    padding:13px 20px; border-radius:99px; background:#F5EFE2; color:var(--ink);
    font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap;
    transition:transform var(--t-snap) ease, background var(--t-snap) ease; }
  .figma-out__a:hover{ background:#fff; transform:translateY(-1px); }

  /* way in */
  
  .c-cta .cell__b{ padding:20px 22px 22px; gap:9px; justify-content:flex-start; }
  
  
  
  
  

  @media(prefers-reduced-motion:reduce){
    .c-cta__a{ transition:none }
  }

.dl{ display:grid; gap:14px; margin-top:1.6rem; }
  .dl__item{ border:1px solid var(--rule); border-radius:16px; background:#fff; overflow:hidden; }
  .dl__q{ font-size:1.05rem; font-weight:600; color:var(--ink); line-height:1.3;
    padding:clamp(16px,2vw,20px) clamp(16px,2vw,22px) 0; margin:0; }
  .dl__rows{ display:grid; margin-top:14px; }
  .dl__row{ display:grid; gap:4px; padding:12px clamp(16px,2vw,22px); border-top:1px solid var(--rule); }
  @media(min-width: 720px){ .dl__row{ grid-template-columns:96px 1fr; gap:20px; align-items:baseline; } }
  .dl__k{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size: 11px; letter-spacing: 0.02em; color:var(--ink3); }
  .dl__v{ font-size:.95rem; line-height:1.6; color:var(--ink2); margin:0; }
  .dl__v strong{ color:var(--ink); font-weight:600; }
  .dl__row--cost .dl__k{ color:var(--page-accent); }


  /* six cells, varied sizes, same rhythm as the other design cases */
  @media(min-width:900px){
    .sc .sc__grid{ grid-template-columns:repeat(3,minmax(0,1fr));
      grid-template-areas:"live live live" "sel sel door" "type grade cta"; }
    .sc .c-live{ grid-area:live } .sc .c-sel{ grid-area:sel } .sc .c-door{ grid-area:door }
    .sc .c-type{ grid-area:type } .sc .c-grade{ grid-area:grade } .sc .c-cta{ grid-area:cta }
  }


  /* hero dot field, as on the other case heroes. this page does not load
     legacy-work.css?v=20260911i, so the positioning rules come along here. */
  .case-hero{ position:relative; overflow:hidden; isolation:isolate; }
  .case-hero .hero__dots{ position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; z-index:0;
    -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); }
  .case-hero > .dc-shell{ max-width:var(--page-measure,1100px); margin:0 auto; padding:0 var(--page-pad,clamp(26px,6vw,40px)); }


/* Style G v4 bento. The ground is this case's tint in the Figma file. --u is the
   largest px per drawing unit at which every ground still fits its tile. */
.sc { --bento-ground: #EBE6EA; }
@media (min-width: 900px) {
  .sc .sc__grid { --u: min(1px, (100cqw - 36px) / 948, ((100cqw - 28px) * 2 / 3 - 22px) / 603, ((100cqw - 28px) / 3 - 36px) / 295); }
}