/* Heineken B2B case page.
   Case scaffolding shared with the other design cases: dc-shell, dc-grid,
   dc-sec, dc-toc, figma-out, case-hero, case-meta. Covestro's specimen
   classes are stripped; page-specific rules for this case sit at the end. */

/* 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:#008100; --page-accent-strong:#006400; --page-accent-wash:#eef5ee;
      --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; } }

.dc-toc{ position:sticky; top:96px; }

.dc-toc__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }

.dc-toc__list a{ display:block; padding:2px 0 2px 12px; margin-left:-1px; border-left:2px solid transparent; font-size:11px; line-height:1.4; color:var(--ink3,#645e55); text-decoration:none; white-space:nowrap; transition:font-size .16s ease, color .15s ease, border-color .15s ease; }

.dc-toc__list a:hover{ color:var(--ink); font-size:13.5px; }

.dc-toc__list a.is-current{ color:var(--ink); border-left-color:var(--ink); font-weight:600; }

.case-hero__crumb{ font-size:13px; margin:0 0 clamp(20px,3vw,30px); }

.case-hero__crumb a{ color:var(--ink3,#645e55); 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,#645e55); 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,#4a4a44); 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,#4a4a44); 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,#645e55); }

.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,#4a4a44); }

.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,#645e55); font-weight:400; flex:none; }

.dcv-der__note{ font-size:.94rem; line-height:1.6; color:var(--ink3,#645e55); 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-rows{ border-top:1px solid var(--rule); margin-top:1.4rem; }

.dc-row{ display:grid; grid-template-columns:minmax(150px,1fr) 2.2fr; gap:clamp(1rem,4vw,3rem); padding:clamp(1.05rem,2.2vw,1.45rem) 0; border-bottom:1px solid var(--rule); align-items:baseline; }

@media(max-width: 720px){ .dc-row{ grid-template-columns:1fr; gap:.35rem; } }

.dc-row__name{ font-size:1.0625rem; font-weight:600; color:var(--ink); margin:0; display:flex; align-items:center; gap:10px; }

.dc-row__name svg{ width:18px; height:18px; color:var(--page-accent); flex:none; }

.dc-row__desc{ font-size:.98rem; color:var(--ink2,#4a4a44); line-height:1.6; margin:0; max-width:60ch; }

.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,#4a4a44); 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,#645e55); 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{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,44px); margin-top:1.6rem; }

.dc-results--2{ grid-template-columns:repeat(2,1fr); max-width:none; }

@media(max-width: 720px){ .dc-results{ grid-template-columns:1fr; gap:26px; } }

.dc-results__k{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size: 11px; letter-spacing: 0.02em; color:var(--ink3,#645e55); margin:0 0 12px; }

.dc-results__k--pos{ color:var(--page-accent); } .dc-results__k--warn{ color:var(--page-accent); }

.dc-results__h{ font-size:clamp(1.05rem,1.5vw,1.22rem); font-weight:600; color:var(--ink); line-height:1.22; margin:0 0 8px; letter-spacing:-.01em; }

.dc-results__d{ font-size:.92rem; color:var(--ink2,#4a4a44); line-height:1.55; margin:0; max-width:36ch; }

/* ---- 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); }

/* 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)); }

}

@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; }

}

/* 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; } }

.sc__grid{ display:grid; gap:14px; grid-template-columns:1fr; }

.cell__k{ margin:0; font-weight:400; font-family:"JetBrains Mono",ui-monospace,monospace; font-size: 11px;
    letter-spacing: 0.02em; color:var(--ink3,#645e55);
    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; }

/* live prototype. Own frame class so none of the page-level
     .proto-frame viewport media queries reach into this cell. */


.mi{ position:relative; width:100%; max-width:322px; margin:0 auto; padding-bottom:8px;
    border-radius:22px; background:var(--color-background); border:1px solid var(--color-border);
    overflow:hidden; font-family:var(--font); }

.mi__body{ padding:14px; display:grid; gap:8px; }

.mi__card{ background:var(--color-surface); border:1px solid var(--color-border);
    border-radius:14px; padding:13px 14px; box-shadow:var(--shadow); }

.mi__t{ font-size:13px; font-weight:700; color:var(--color-text); margin:0 0 3px; }

.mi__d{ font-size:11.5px; color:var(--color-text-muted); margin:0; line-height:1.45; }

.mi__btn{ display:block; width:calc(100% - 28px); margin:2px 14px 0; padding:11px 14px;
    border:0; border-radius:15px; background:var(--color-primary); color:#fff;
    font:600 13px/1 var(--font); cursor:pointer;
    transition:background .18s ease, transform .12s ease; }

.mi__btn:hover{ background:var(--color-primary-hover); }

.mi__btn:active{ transform:scale(.985); }

.mi__scrim{ position:absolute; inset:0; border-radius:22px; background:rgba(10,15,26,.34); opacity:0;
    pointer-events:none; transition:opacity .34s cubic-bezier(.2,.8,.2,1); }

.mi__sheet{ position:absolute; left:0; right:0; bottom:0; background:var(--color-surface);
    border-radius:26px 26px 0 0; padding:18px 16px 16px; transform:translateY(101%);
    transition:transform .42s cubic-bezier(.22,1,.36,1); box-shadow:0 -12px 34px -18px rgba(16,30,60,.4); }

.mi__grab{ width:38px; height:4px; border-radius:99px; background:var(--color-border);
    margin:0 auto 13px; }

.mi.is-open .mi__scrim{ opacity:1 }

.mi.is-open .mi__sheet{ transform:translateY(0) }

.mi__close{ margin-top:12px; width:100%; padding:10px; border:1px solid var(--color-border);
    border-radius:14px; background:none; font:600 12.5px/1 var(--font);
    color:var(--color-text-secondary); cursor:pointer; }

.mi__close:hover{ background:var(--color-background); }

.mi__hint{ position:absolute; right:12px; top:12px; font-family:"JetBrains Mono",monospace;
    font-size:9.5px; letter-spacing:.06em; color:var(--color-text-subtle); }

/* foundations cells */
  .sw{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }

.sw li{ display:grid; grid-template-columns:18px 1fr auto; gap:11px; align-items:center; }

.sw i{ width:18px; height:18px; border-radius:5px; display:block; }

.sw b{ font-size:12.5px; font-weight:500; color:var(--ink); }

.sw span{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10.5px;
    color:var(--ink3,#645e55); letter-spacing:.02em; }

.ty{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }

.ty li{ display:grid; gap:3px; }

.ty__s{ font-family:var(--font); color:var(--color-text); line-height:1.1; }

.ty__m{ font-family:"JetBrains Mono",ui-monospace,monospace; font-size:10px;
    color:var(--ink3,#645e55); letter-spacing:.03em; }

/* 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 .16s ease, background .16s ease; }

.figma-out__a:hover{ background:#fff; transform:translateY(-1px); }

@media(prefers-reduced-motion:reduce){
    .mi__sheet,.mi__scrim,.mi__btn,.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,#645e55); }

.dl__v{ font-size:.95rem; line-height:1.6; color:var(--ink2,#4a4a44); margin:0; }

.dl__v strong{ color:var(--ink); font-weight:600; }

.dl__row--cost .dl__k{ color:var(--page-accent); }


/* 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)); }


/* ---- Page-specific: the two specimens ---------------------------------- */

/* Two summaries side by side, so the reader sees one component doing two jobs
   rather than being told it does. Stacks on a phone, where side by side would
   make both unreadable. */
.hk-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
  margin: 20px 0 8px;
}
@media (max-width: 720px) { .hk-pair { grid-template-columns: 1fr; } }

.hk-fig { margin: 0; }
.hk-fig figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}

.hk-sum {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px 20px;
}
.hk-sum__row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 5px 0;
  font-size: 13px;
  color: var(--muted);
}
.hk-sum__row--lead { font-size: 15px; font-weight: 600; color: var(--ink); }
.hk-sum__row--total { font-size: 20px; font-weight: 600; color: var(--ink); padding-top: 10px; }
.hk-sum__row--save { color: #008100; font-weight: 500; }
/* the deposit is the line the platform had no home for */
.hk-sum__row--mark { color: var(--ink); font-weight: 500; }
.hk-sum__row--mark span:first-child { box-shadow: inset 0 -6px 0 rgba(0,129,0,.14); }
.hk-sum__rule { height: 1px; background: var(--rule); margin: 8px 0; }

.hk-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 4px; }
.hk-b {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
}
.hk-b--promo { background: #286CB7; }
.hk-b--disc  { background: #FFCA00; color: #1A1A1A; }
.hk-b--offer { background: #FF7900; }
.hk-b--comp  { background: #8F258A; }
.hk-b--mix   { background: #008100; }

/* ================================================================
   Case showcase grid, same shape as the other design cases.
   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: .02em; color: var(--ink3,#645e55); padding: 15px 18px 0; }
.cell__b { padding: 14px 18px 18px; flex: 1; display: flex; flex-direction: column;
  justify-content: center; min-width: 0; }

.c-cta { background: var(--ink); border-color: var(--ink); }
.c-cta .cell__b { padding: 20px 22px 22px; gap: 9px; justify-content: flex-start; }
.c-cta .cell__k { color: rgba(245,239,226,.5); }

@media (min-width: 900px) {
  .sc .sc__grid { grid-template-columns: repeat(3, minmax(0,1fr));
    grid-template-areas: "live live live" "warn warn badge" "nl path cta"; }
  .sc .c-live { grid-area: live } .sc .c-warn { grid-area: warn }
  .sc .c-badge { grid-area: badge } .sc .c-nl { grid-area: nl }
  .sc .c-path { grid-area: path }
  .sc .c-cta { grid-area: cta }
}

/* ═══ Way in ══════════════════════════════════════════════════════════════
   Verbatim from design-finanzcheck.css and design-covestro.css. The CTA cell
   is shared template, not per-page design. */
.c-cta__t{ font-size:clamp(1.05rem,1.6vw,1.28rem); font-weight:600; letter-spacing:-.015em;
  color:#F5EFE2; margin:0; line-height:1.25; max-width:30ch; }
.c-cta__d{ font-size:.9rem; color:rgba(245,239,226,.62); margin:0; line-height:1.5; max-width:44ch; }
.c-cta__a{ margin-top:6px; align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:99px; background:#F5EFE2; color:var(--ink);
  font-size:13px; font-weight:600; text-decoration:none;
  transition:transform .16s ease, background .16s ease; }
.c-cta__a:hover{ background:#fff; transform:translateY(-1px); }
@media(prefers-reduced-motion:reduce){ .c-cta__a{ transition:none } }

/* 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: #E5E9E1; }
@media (min-width: 900px) {
  .sc .sc__grid { --u: min(1px, (100cqw - 36px) / 948, ((100cqw - 28px) * 2 / 3 - 22px) / 603, ((100cqw - 28px) / 3 - 36px) / 295); }
}
/* the way in keeps the padding and gap it had before the bento was replaced */
.c-cta .cell__b { padding: 20px 22px 24px; gap: 14px; }