@font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-Light.woff2") format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
  @font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-LightItalic.woff2") format("woff2"); font-weight:300; font-style:italic; font-display:swap; }
  @font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
  @font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-RegularItalic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
  @font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-Medium.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
  @font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-MediumItalic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
  @font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-Bold.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
  @font-face { font-family:"Canela Deck"; src:url("assets/fonts/CanelaDeck-BoldItalic.woff2") format("woff2"); font-weight:700; font-style:italic; font-display:swap; }

  :root {
    /* brand palette */
    --oat:        #EFE7D8;   /* paper / reverse */
    --oat-2:      #E7DDCB;
    --oat-3:      #DBCEB5;
    --surface:    #F4EDDF;
    --surface-2:  #FBF7EF;   /* lifted card */

    --bark:       #2E2A24;   /* ink / Fabriq / tile */
    --ink:        #2E2A24;
    --ink-soft:   #5B554A;
    --ink-faint:  #74695A;   /* meets WCAG AA (>=4.5:1) on oat */

    --terracotta:      #C56B4A;  /* accent / Wise / top thread */
    --terracotta-deep: #A2502F;
    --terracotta-soft: #E6B59C;
    --sage:       #7E8B6A;   /* bottom thread */
    --sage-soft:  #C7CEB6;
    --moss:       #4F5D3F;   /* deep accent, sparing */

    --line:       #D9CCB4;

    /* functional grade scale, tuned to the palette */
    --grade-a: #4F5D3F;  /* moss  */
    --grade-b: #7E8B6A;  /* sage  */
    --grade-c: #C9A24A;  /* ochre */
    --grade-d: #C56B4A;  /* terracotta */
    --grade-f: #9E4429;  /* deep rust  */

    --shadow-sm: 0 1px 2px rgba(46,42,36,.06), 0 2px 8px rgba(46,42,36,.05);
    --shadow-md: 0 4px 12px rgba(46,42,36,.08), 0 18px 40px rgba(46,42,36,.10);
    --shadow-lg: 0 10px 30px rgba(46,42,36,.12), 0 40px 80px rgba(46,42,36,.16);

    --maxw: 1200px;
    --ease: cubic-bezier(.22,.61,.36,1);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  /* keyboard "skip to content" link: off-screen until focused */
  .skip-link { position: absolute; left: 12px; top: -48px; z-index: 200; background: var(--terracotta); color: var(--oat); padding: 10px 16px; border-radius: 0 0 10px 10px; font-weight: 600; transition: top .15s ease; }
  .skip-link:focus { top: 0; outline: 2px solid var(--bark); outline-offset: 2px; }

  body {
    font-family: "Hanken Grotesk", sans-serif;
    background: var(--oat);
    color: var(--ink);
    line-height: 1.55;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    position: relative;
  }

  /* grain overlay */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  ::selection { background: var(--sage-soft); color: var(--moss); }

  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }

  .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }

  .mono { font-family: "DM Mono", monospace; font-weight: 500; letter-spacing: .02em; }

  .serif { font-family: "Canela Deck", "Times New Roman", serif; font-weight: 400; }

  .eyebrow {
    font-family: "DM Mono", monospace;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--terracotta);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--terracotta); display: inline-block; }

  /* ---------- Buttons ---------- */
  .btn {
    font-family: "Hanken Grotesk", sans-serif;
    font-weight: 600;
    font-size: 15px;
    border: none;
    cursor: pointer;
    padding: 14px 24px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--terracotta);
    color: #FBF6EC;
    box-shadow: 0 4px 14px rgba(197,107,74,.32);
  }
  .btn-primary:hover {
    background: var(--terracotta-deep);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(197,107,74,.42);
  }
  .btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
  .btn-ghost:hover { border-color: var(--ink); background: rgba(46,42,36,.03); }
  .btn svg { width: 18px; height: 18px; }

  /* ---------- Nav ---------- */
  header.nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: color-mix(in srgb, var(--oat) 82%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
  }
  header.nav.scrolled { border-color: var(--line); }
  .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; }
  .brand { display: flex; align-items: center; }
  .brand-lockup { height: 40px; width: auto; }
  .nav-links { display: flex; align-items: center; gap: 34px; }
  .nav-links a.link { font-size: 14.5px; font-weight: 500; color: var(--ink-soft); position: relative; transition: color .2s ease; }
  .nav-links a.link::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1.5px; background: var(--terracotta); transition: width .3s var(--ease); }
  .nav-links a.link:hover { color: var(--ink); }
  .nav-links a.link:hover::after { width: 100%; }
  .nav-cta { display: flex; align-items: center; gap: 14px; }
  @media (max-width: 860px) { .nav-links a.link { display: none; } }
  @media (max-width: 720px) { .nav-cta .btn-tip { display: none; } }

  /* ---------- Hero ---------- */
  .hero { position: relative; padding-top: 70px; padding-bottom: 90px; overflow: hidden; }
  .hero::after {
    content:"";
    position:absolute; top:-120px; right:-120px;
    width: 520px; height: 520px;
    background:
      repeating-linear-gradient(45deg, transparent 0 9px, rgba(126,139,106,.12) 9px 10px),
      repeating-linear-gradient(-45deg, transparent 0 9px, rgba(197,107,74,.10) 9px 10px);
    border-radius: 50%;
    -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%);
    mask-image: radial-gradient(circle, #000 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
  }
  .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; position: relative; z-index: 2; }
  .hero-copy .eyebrow { margin-bottom: 24px; }
  .hero-copy h1 {
    font-family: "Canela Deck", "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(42px, 6.2vw, 82px);
    line-height: .96;
    letter-spacing: -.02em;
    margin-bottom: 24px;
  }
  .hero-copy h1 .accent { color: var(--terracotta); font-style: italic; font-weight: 400; }
  .hero-copy h1 .scribble { display:inline-block; position: relative; }
  .hero-copy h1 .scribble::after {
    content:""; position:absolute; left:-2%; right:-2%; bottom: 6%; height: 34%;
    background: var(--sage-soft); opacity:.7; z-index:-1; border-radius: 3px; transform: rotate(-1deg);
  }
  .hero-copy .lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-soft); max-width: 480px; margin-bottom: 34px; }
  .hero-copy .lead .ul { color: var(--ink); border-bottom: 2px solid var(--sage); }
  .hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .hero-meta { margin-top: 30px; display: flex; align-items: center; gap: 18px; font-size: 13.5px; color: var(--ink-faint); }

  .reveal-up { opacity: 0; transform: translateY(22px); }
  .loaded .reveal-up { animation: revealUp .9s var(--ease) forwards; }
  @keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

  /* ---------- Score card (hero visual) ---------- */
  .demo-stage { position: relative; perspective: 1400px; }
  .browser {
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transform: rotateY(-7deg) rotateX(3deg);
    transform-style: preserve-3d;
    transition: transform .6s var(--ease);
  }
  .demo-stage:hover .browser { transform: rotateY(-2deg) rotateX(1deg); }
  .browser-bar { height: 40px; background: var(--oat-2); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 7px; padding: 0 14px; }
  .dot { width: 10px; height: 10px; border-radius: 50%; }
  .browser-url {
    margin-left: 10px; flex: 1; background: var(--oat); border-radius: 6px; height: 22px;
    font-family: "DM Mono", monospace; font-size: 11px; color: var(--ink-faint);
    display: flex; align-items: center; padding: 0 10px; gap: 6px;
  }
  .browser-body { padding: 22px; display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; }
  .pdp-thumb { aspect-ratio: 3/4; border-radius: 9px; background: linear-gradient(135deg, #d9c4a8, #b89a78); position: relative; overflow: hidden; }
  .pdp-thumb::after { content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 2px, transparent 2px 5px); mix-blend-mode: overlay; }
  .pdp-info .pdp-brand { font-family:"DM Mono",monospace; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
  .pdp-info .pdp-title { font-family:"Canela Deck",serif; font-size:19px; font-weight:400; margin: 3px 0 5px; }
  .pdp-info .pdp-price { font-size:14px; color: var(--ink-soft); font-weight:600; }

  .widget {
    position: absolute; right: -26px; bottom: -34px; width: 272px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px;
    box-shadow: var(--shadow-md); padding: 18px; transform: translateZ(60px); z-index: 5;
  }
  .widget-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
  .widget-head .wlogo { height: 17px; width: auto; }
  .tag-live { font-family:"DM Mono",monospace; font-size:9.5px; letter-spacing:.12em; color: var(--moss); background: var(--sage-soft); padding: 3px 7px; border-radius: 100px; display:flex; align-items:center; gap:5px; }
  .tag-live .pulse { width:6px; height:6px; border-radius:50%; background: var(--moss); animation: pulse 1.6s infinite; }
  @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.25} }

  .score-row { display:flex; align-items:center; gap:14px; margin-bottom: 16px; }
  .gauge {
    --val: 0; --col: var(--grade-a);
    width: 76px; height: 76px; border-radius: 50%; flex: none;
    background: conic-gradient(var(--col) calc(var(--val) * 1%), var(--oat-3) 0);
    display: grid; place-items: center; position: relative; transition: background .1s linear;
  }
  .gauge::after { content:""; position:absolute; inset:8px; background: var(--surface-2); border-radius:50%; }
  .gauge .grade { position: relative; z-index:2; font-family:"Canela Deck",serif; font-weight:400; font-size: 32px; color: var(--col); line-height:1; }
  .score-meta .score-num { font-family:"DM Mono",monospace; font-size:13px; color:var(--ink-soft); }
  .score-meta .score-num b { color: var(--ink); font-size: 20px; }
  .score-meta .score-label { font-size:12.5px; color:var(--ink-faint); margin-top:2px; }
  .score-verdict { font-family:"Canela Deck",serif; font-size:16px; color: var(--terracotta-deep); margin-top:3px; }

  .comp-list { display:flex; flex-direction:column; gap:9px; }
  .comp { display:grid; grid-template-columns: 1fr auto; gap:6px; font-size:11.5px; }
  .comp .comp-top { display:flex; justify-content:space-between; align-items:baseline; }
  .comp .cname { font-weight:600; }
  .comp .cpct { font-family:"DM Mono",monospace; color:var(--ink-soft); }
  .bar { grid-column: 1 / -1; height:6px; border-radius:100px; background: var(--oat-3); overflow:hidden; }
  .bar > i { display:block; height:100%; width:0; border-radius:100px; transition: width 1.1s var(--ease); }
  .bar.natural > i { background: linear-gradient(90deg, var(--sage), var(--moss)); }
  .bar.synth > i   { background: linear-gradient(90deg, var(--terracotta-soft), var(--terracotta)); }
  .ctag { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; padding:1px 5px; border-radius:4px; }
  .ctag.nat { color:var(--moss); background: var(--sage-soft); }
  .ctag.syn { color:var(--terracotta-deep); background: #F0D7C9; }

  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 80px; }
    .demo-stage { max-width: 460px; margin: 0 auto; }
    .browser { transform: none; }
  }

  /* ---------- Section scaffolding ---------- */
  section { position: relative; }
  .pad { padding: 100px 0; }
  .section-head { max-width: 660px; margin-bottom: 56px; }
  .section-head.center { margin-inline: auto; text-align: center; }
  .section-head h2 {
    font-family:"Canela Deck", "Times New Roman", serif;
    font-weight: 400;
    font-size: clamp(32px, 4.2vw, 54px);
    line-height: 1.03;
    letter-spacing: -.015em;
    margin: 16px 0 18px;
  }
  .section-head h2 .accent { color: var(--terracotta); font-style: italic; }
  .section-head p { font-size: 18px; color: var(--ink-soft); }

  .sr { opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
  .sr.in { opacity:1; transform: none; }

  /* ---------- Problem section ---------- */
  .problem { background: var(--bark); color: #EAE0CF; }
  .problem .eyebrow { color: var(--terracotta-soft); }
  .problem .eyebrow::before { background: var(--terracotta-soft); }
  .problem .section-head h2 .accent { color: var(--terracotta); }
  .problem .section-head p { color: #C3BAA7; }
  .stat-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(234,224,207,.13); border: 1px solid rgba(234,224,207,.13); border-radius: 18px; overflow: hidden; }
  .stat { background: var(--bark); padding: 40px 32px; transition: background .4s ease; }
  .stat:hover { background: #3a352d; }
  .stat .big { font-family:"Canela Deck", serif; font-weight: 400; font-size: clamp(48px, 6vw, 70px); line-height: 1; color: var(--oat); letter-spacing: -.01em; }
  .stat .big .unit { font-size:.4em; color: var(--terracotta-soft); }
  .stat .big.term { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
  .stat .lbl { margin-top: 14px; font-size: 15px; color: #C3BAA7; max-width: 240px; }
  .footnote { margin-top: 22px; font-size: 12.5px; color: rgba(234,224,207,.5); font-family:"DM Mono",monospace; }
  @media (max-width: 820px){ .stat-grid{ grid-template-columns:1fr; } }

  /* ---------- How it works ---------- */
  .steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
  .step { background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px; padding: 32px 28px 30px; position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .step:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
  .step .num { font-family:"DM Mono",monospace; font-size: 12px; color: var(--terracotta); letter-spacing: .1em; }
  .step .ico { width: 52px; height: 52px; border-radius: 14px; background: var(--oat-2); display:grid; place-items:center; margin: 18px 0 20px; color: var(--moss); }
  .step .ico svg { width: 26px; height: 26px; }
  .step h3 { font-family:"Canela Deck",serif; font-weight:400; font-size: 24px; margin-bottom: 10px; }
  .step p { font-size: 15px; color: var(--ink-soft); }
  .step::after { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--sage), var(--terracotta)); transform: scaleX(0); transform-origin:left; transition: transform .5s var(--ease); }
  .step:hover::after { transform: scaleX(1); }
  @media (max-width: 820px){ .steps{ grid-template-columns:1fr; } }

  /* ---------- Final CTA ---------- */
  .final { background: var(--moss); color: var(--oat); border-radius: 32px; padding: 80px 56px; position: relative; overflow: hidden; text-align:center; }
  .final::before { content:""; position:absolute; inset:0; background: repeating-linear-gradient(45deg, transparent 0 13px, rgba(239,231,216,.05) 13px 14px); pointer-events:none; }
  .final::after { content:""; position:absolute; width: 380px; height:380px; border-radius:50%; background: radial-gradient(circle, var(--terracotta), transparent 70%); opacity:.45; filter: blur(20px); bottom:-180px; right:-80px; }
  .final h2 { font-family:"Canela Deck","Times New Roman",serif; font-weight:400; font-size: clamp(34px, 5vw, 60px); line-height:1.02; letter-spacing:-.02em; margin-bottom: 20px; position:relative; z-index:2; }
  .final h2 .accent { color: var(--terracotta-soft); font-style: italic; }
  .final p { font-size:18px; color: rgba(239,231,216,.82); max-width:520px; margin:0 auto 36px; position:relative; z-index:2; }
  .final .hero-actions { justify-content:center; position:relative; z-index:2; }
  .final .btn-ghost { color: var(--oat); border-color: rgba(239,231,216,.32); }
  .final .btn-ghost:hover { border-color: var(--oat); background: rgba(239,231,216,.07); }
  .final .free-note { margin-top: 22px; font-family:"DM Mono",monospace; font-size:12px; color: rgba(239,231,216,.6); position:relative; z-index:2; }

  /* ---------- FAQ ---------- */
  .faq-grid { max-width: 760px; margin: 0 auto; }
  .faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
  .faq-q { width:100%; background:none; border:none; cursor:pointer; text-align:left; font-family:"Canela Deck",serif; font-weight:400; font-size: 22px; color: var(--ink); padding: 22px 40px 22px 0; position: relative; display:block; }
  .faq-q::after { content:"+"; position:absolute; right: 4px; top:50%; transform: translateY(-50%); font-family:"Hanken Grotesk"; font-weight:400; font-size:26px; color: var(--terracotta); transition: transform .3s var(--ease); }
  .faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
  .faq-a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
  .faq-a p { padding: 0 40px 24px 0; font-size: 16px; color: var(--ink-soft); }
  .faq-a a { color: var(--terracotta); border-bottom: 1px solid color-mix(in srgb, var(--terracotta) 45%, transparent); transition: border-color .2s ease, color .2s ease; }
  .faq-a a:hover { color: var(--terracotta-deep); border-bottom-color: var(--terracotta-deep); }

  /* ---------- Footer ---------- */
  footer.site { padding: 70px 0 40px; border-top: 1px solid var(--line); }
  .foot-grid { display:grid; grid-template-columns: 1.8fr 1fr; gap: 40px; margin-bottom: 48px; }
  /* the lockup SVG has internal top/left whitespace; pull it back so the
     tile lines up with the column heading and the blurb below it */
  .foot-brand .brand-lockup { height: 40px; margin: -7px 0 0 -9px; }
  .foot-brand p { font-size:14.5px; color:var(--ink-soft); max-width: 280px; margin-top:12px; }
  .foot-col h5 { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:16px; }
  .foot-col a { display:block; font-size:14.5px; color:var(--ink-soft); padding:6px 0; transition: color .2s, padding-left .2s; }
  .foot-col a:hover { color: var(--terracotta); padding-left: 5px; }
  .foot-col a .tip-heart { color: var(--terracotta); display: inline-block; margin-left: 3px; transition: transform .25s var(--ease); }
  .foot-col a:hover .tip-heart { transform: scale(1.25); }
  .foot-bottom { display:flex; justify-content:space-between; align-items:center; padding-top: 28px; border-top:1px solid var(--line); font-size: 13px; color: var(--ink-faint); flex-wrap:wrap; gap:14px; }
  .foot-bottom .mono { font-size:12px; }
  @media (max-width: 820px){ .foot-grid{ grid-template-columns:1fr 1fr; } }

  /* ---------- Tip modal ---------- */
  .tip-overlay {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-items: center; padding: 24px;
    background: rgba(46,42,36,.55);
    backdrop-filter: blur(6px);
    opacity: 0; visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .tip-overlay.open { opacity: 1; visibility: visible; }
  .tip-card {
    background: var(--oat); border: 1px solid var(--line); border-radius: 24px;
    padding: 40px; max-width: 470px; width: 100%; position: relative;
    box-shadow: var(--shadow-lg);
    transform: translateY(16px) scale(.97);
    transition: transform .4s var(--ease);
  }
  .tip-overlay.open .tip-card { transform: none; }
  .tip-close {
    position: absolute; top: 18px; right: 18px;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface-2);
    cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink-soft);
    display: grid; place-items: center;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
  }
  .tip-close:hover { background: var(--terracotta); color: #FBF6EC; border-color: var(--terracotta); }
  .tip-title { font-family:"Canela Deck",serif; font-weight:400; font-size: 34px; line-height: 1.04; margin: 14px 0 10px; }
  .tip-title .accent { font-style: italic; color: var(--terracotta); }
  .tip-sub { font-size: 15px; color: var(--ink-soft); margin-bottom: 26px; }
  .tip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .tip-opt {
    display: flex; flex-direction: column; gap: 4px; padding: 20px;
    border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
    transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
  }
  .tip-opt:hover { transform: translateY(-3px); border-color: var(--terracotta); box-shadow: var(--shadow-sm); }
  .tip-opt .amt { font-family:"Canela Deck",serif; font-weight:400; font-size: 30px; line-height: 1; }
  .tip-opt.other .amt { font-style: italic; color: var(--terracotta); }
  .tip-opt .cap { font-family:"DM Mono",monospace; font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }
  .tip-foot { margin-top: 22px; text-align: center; font-family:"DM Mono",monospace; font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }
  @media (max-width: 420px){ .tip-card { padding: 30px 22px; } }

  .reduce-motion * { animation: none !important; transition: none !important; }
  /* reveal-up is driven by an animation; when motion is off, show it statically
     instead of leaving it stuck at opacity:0. Covered both via the JS .reduce-motion
     class and a CSS media query so it holds even if the script is slow/blocked. */
  .reduce-motion .reveal-up { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .reveal-up { opacity: 1; transform: none; }
  }

  /* ====================================================================
     Content pages (How We Score, Fabric 101, Fabric Care Guide, About)
     ==================================================================== */
  .nav-links a.link.active { color: var(--ink); }
  .nav-links a.link.active::after { width: 100%; }

  .page-head { padding: 84px 0 26px; }
  .page-head h1 {
    font-family:"Canela Deck","Times New Roman",serif; font-weight:400;
    font-size: clamp(40px, 6vw, 74px); line-height: 1.0; letter-spacing: -.02em;
    margin: 18px 0 20px;
  }
  .page-head h1 .accent { color: var(--terracotta); font-style: italic; }
  .page-head .lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--ink-soft); max-width: 600px; }

  .prose { max-width: 720px; }
  .prose + .prose { margin-top: 44px; }
  .prose h2 { font-family:"Canela Deck",serif; font-weight:400; font-size: clamp(26px,3.4vw,38px); line-height:1.05; letter-spacing:-.01em; margin: 0 0 14px; }
  .prose h3 { font-family:"Canela Deck",serif; font-weight:400; font-size: 22px; margin: 26px 0 8px; }
  .prose p { font-size: 17px; color: var(--ink-soft); margin-bottom: 16px; }
  .prose ul { margin: 0 0 18px 1.15em; color: var(--ink-soft); font-size: 17px; }
  .prose ol:not(.crit-overview) { margin: 0 0 18px 1.5em; color: var(--ink-soft); font-size: 17px; }
  .prose li { margin-bottom: 8px; }
  .prose a { color: var(--terracotta); border-bottom: 1px solid color-mix(in srgb, var(--terracotta) 45%, transparent); }
  .prose a:hover { color: var(--terracotta-deep); }

  .info-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 22px; }
  .info-card {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 18px;
    padding: 28px 26px; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
  .info-card .kicker { font-family:"DM Mono",monospace; font-size: 11px; letter-spacing:.12em; text-transform:uppercase; color: var(--terracotta); }
  .info-card h3 { font-family:"Canela Deck",serif; font-weight:400; font-size: 21px; margin: 10px 0 8px; }
  .info-card p { font-size: 15px; color: var(--ink-soft); }

  /* ---------- Mobile menu / hamburger ---------- */
  .nav-toggle {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer;
  }
  .nav-toggle span { display: block; width: 24px; height: 2px; margin: 0 auto; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease), opacity .2s ease; }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .mobile-menu {
    position: fixed; left: 0; right: 0; top: 76px; z-index: 99;
    display: flex; flex-direction: column; gap: 2px;
    padding: 14px 28px 26px; max-height: calc(100vh - 76px); overflow-y: auto;
    background: var(--oat); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
    opacity: 0; visibility: hidden; transform: translateY(-12px);
    transition: opacity .28s ease, transform .28s var(--ease), visibility .28s ease;
  }
  .mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu a.m-link { font-family:"Canela Deck",serif; font-weight:400; font-size: 24px; color: var(--ink); padding: 14px 0; border-bottom: 1px solid var(--line); }
  .mobile-menu a.m-link.active { color: var(--terracotta); }
  .mobile-menu .m-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
  .mobile-menu .m-actions .btn { width: 100%; justify-content: center; }

  @media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .nav-cta { display: none; }
  }
  @media (min-width: 861px) {
    .mobile-menu { display: none; }
  }

  /* ---------- Feedback form (in the feedback modal) ---------- */
  .fb-form { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
  .fb-text, .fb-email {
    font-family: "Hanken Grotesk", sans-serif; font-size: 14.5px; color: var(--ink);
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
    padding: 12px 14px; width: 100%; transition: border-color .2s ease;
  }
  .fb-text { min-height: 104px; resize: vertical; line-height: 1.5; }
  .fb-text:focus, .fb-email:focus { outline: none; border-color: var(--terracotta); }
  .fb-text::placeholder, .fb-email::placeholder { color: var(--ink-faint); }
  .fb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } /* honeypot */
  .fb-send { justify-content: center; margin-top: 2px; }
  .fb-send[disabled] { opacity: .6; cursor: default; transform: none; box-shadow: none; }
  .fb-status { min-height: 1.2em; margin: 2px 0 0; text-align: center; font-size: 13px; color: var(--ink-soft); }
  .fb-status.ok { color: var(--moss); }
  .fb-status.err { color: var(--terracotta-deep); }

  /* ---------- Footer privacy link ---------- */
  .foot-bottom a { color: var(--ink-soft); border-bottom: 1px solid color-mix(in srgb, var(--terracotta) 40%, transparent); transition: color .2s ease; }
  .foot-bottom a:hover { color: var(--terracotta); }

  /* ---------- Legal / privacy page ---------- */
  .legal { max-width: 760px; padding-top: 64px; padding-bottom: 90px; }
  .legal h1 { font-family:"Canela Deck","Times New Roman",serif; font-weight:400; font-size: clamp(36px,5vw,56px); line-height:1.0; letter-spacing:-.02em; margin:12px 0 6px; }
  .legal .updated { font-size:12px; color:var(--ink-faint); margin-bottom:28px; }
  .legal .lead { font-size:19px; color:var(--ink-soft); margin-bottom:26px; }
  .legal h2 { font-family:"Canela Deck","Times New Roman",serif; font-weight:400; font-size:24px; margin:34px 0 8px; }
  .legal p, .legal li { font-size:16px; color:var(--ink-soft); line-height:1.65; }
  .legal ul { margin:8px 0 8px 22px; }
  .legal li { margin-bottom:6px; }
  .legal strong { color:var(--ink); }
  .legal a { color:var(--terracotta); border-bottom:1px solid color-mix(in srgb,var(--terracotta) 40%,transparent); }
  .legal a:hover { color:var(--terracotta-deep); }
  .legal-card { background:var(--surface-2); border:1px solid var(--line); border-left:4px solid var(--sage); border-radius:12px; padding:18px 20px; margin:26px 0; font-size:15.5px; line-height:1.6; color:var(--ink-soft); }
  .legal-card strong { color:var(--ink); }

  /* ---------- How We Score page ---------- */
  /* Intro overview list */
  .crit-overview { margin:4px 0 18px 0; padding:0; list-style:none; counter-reset:crit; display:flex; flex-direction:column; gap:8px; }
  .crit-overview li { counter-increment:crit; position:relative; padding-left:34px; font-size:17px; color:var(--ink); font-family:"Canela Deck",serif; }
  .crit-overview li::before { content:counter(crit); position:absolute; left:0; top:1px; width:23px; height:23px; border-radius:50%; background:var(--sage-soft); color:var(--moss); font-family:"DM Mono",monospace; font-size:12px; display:flex; align-items:center; justify-content:center; }

  /* 1-to-5 scale */
  .score-scale { max-width:760px; }
  .score-level { display:grid; grid-template-columns:44px 1fr; gap:20px; align-items:start; padding:22px 0; border-bottom:1px solid var(--line); }
  .score-level:last-child { border-bottom:none; }
  .level-num { font-family:"Canela Deck",serif; font-weight:400; font-size:34px; line-height:1; color:var(--terracotta); text-align:center; }
  .level-title { font-family:"Canela Deck",serif; font-weight:400; font-size:21px; line-height:1.2; color:var(--ink); margin:2px 0 5px; }
  .level-desc { font-size:16px; color:var(--ink-soft); margin:0; line-height:1.55; }

  /* Five criteria accordion */
  .criteria-list { max-width:840px; }
  .criteria-item { border-bottom:1px solid var(--line); }
  .criteria-item:first-child { border-top:1px solid var(--line); }
  .criteria-heading { margin:0; }
  .criteria-head { width:100%; background:none; border:none; cursor:pointer; text-align:left; display:flex; gap:14px; align-items:center; padding:24px 44px 6px 0; position:relative; }
  .crit-no { font-family:"DM Mono",monospace; font-size:12px; letter-spacing:.12em; color:var(--terracotta); flex:none; }
  .criteria-name { font-family:"Canela Deck",serif; font-weight:400; font-size:23px; line-height:1.2; color:var(--ink); }
  .criteria-head:focus-visible { outline:2px solid var(--terracotta); outline-offset:3px; border-radius:6px; }
  .criteria-head:hover .criteria-name { color:var(--terracotta-deep); }
  .criteria-summary { margin:0; padding:0 44px 24px 0; font-size:15px; color:var(--ink-soft); line-height:1.5; max-width:640px; }
  .criteria-item:has(.crit-no) .criteria-summary { padding-left:30px; }
  .criteria-head::after { content:"+"; position:absolute; right:6px; top:34px; font-family:"Hanken Grotesk",sans-serif; font-weight:400; font-size:26px; line-height:1; color:var(--terracotta); transition:transform .3s var(--ease); }
  .criteria-item.open .criteria-head::after { transform:rotate(45deg); }
  .criteria-body { max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
  .criteria-inner { display:flex; flex-direction:column; gap:18px; padding:2px 0 34px; max-width:680px; }
  .crit-block h4 { font-family:"DM Mono",monospace; font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 9px; }
  .crit-block > p { font-size:16px; color:var(--ink-soft); line-height:1.6; margin:0 0 10px; }
  .crit-block > p:last-child { margin-bottom:0; }
  .crit-block ul { margin:0; padding-left:1.15em; }
  .crit-block li { font-size:15.5px; color:var(--ink-soft); line-height:1.5; margin-bottom:6px; }
  .crit-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .crit-improve, .crit-lower { border-radius:14px; padding:18px 20px; }
  .crit-improve { background:color-mix(in srgb, var(--sage) 13%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--sage) 28%, var(--line)); }
  .crit-lower { background:color-mix(in srgb, var(--terracotta) 10%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--terracotta) 24%, var(--line)); }
  .crit-improve h4 { color:var(--moss); }
  .crit-lower h4 { color:var(--terracotta-deep); }
  /* fiber/component example tags */
  .crit-block ul.crit-tags { display:flex; flex-wrap:wrap; gap:7px; padding:0; list-style:none; }
  .crit-block ul.crit-tags li { margin:0; font-size:13px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:4px 11px; }
  /* lists inside the Other-factors cards */
  .card-list { margin:8px 0 4px; padding-left:1.1em; }
  .card-list li { font-size:14px; color:var(--ink-soft); margin-bottom:5px; }
  .info-card .card-list + p { margin-top:12px; }
  /* closing philosophy line */
  .closing-line { font-family:"Canela Deck",serif; font-weight:400; font-style:italic; font-size:clamp(20px,2.4vw,26px); color:var(--ink); margin-top:18px; }

  @media (max-width:680px){ .crit-cols { grid-template-columns:1fr; } }

  /* ---------- In-page jump nav (long content pages) ---------- */
  .page-jump { position:sticky; top:76px; z-index:90; background:color-mix(in srgb, var(--oat) 88%, transparent); backdrop-filter:blur(12px) saturate(1.2); border-bottom:1px solid var(--line); }
  .page-jump__inner { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; }
  .page-jump__links { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; }
  .page-jump__links::-webkit-scrollbar { display:none; }
  /* soft edge fades cue that the row scrolls sideways; classes toggled by site.js */
  .page-jump__links.fade-r:not(.fade-l) { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 36px), transparent); }
  .page-jump__links.fade-l:not(.fade-r) { -webkit-mask-image:linear-gradient(to right, transparent, #000 36px); mask-image:linear-gradient(to right, transparent, #000 36px); }
  .page-jump__links.fade-l.fade-r { -webkit-mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image:linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
  .page-jump__links a { flex:none; font-size:13px; font-weight:500; color:var(--ink-soft); padding:6px 12px; border-radius:100px; white-space:nowrap; transition:background .2s ease, color .2s ease; }
  .page-jump__links a:hover { color:var(--ink); background:var(--surface-2); }
  .page-jump__links a.current { color:var(--terracotta-deep); background:color-mix(in srgb, var(--terracotta) 12%, transparent); }
  .page-jump__toggle { flex:none; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--terracotta); background:none; border:1px solid var(--line); border-radius:100px; padding:7px 13px; cursor:pointer; transition:border-color .2s ease, color .2s ease; }
  .page-jump__toggle:hover { border-color:var(--terracotta); }
  .page-jump__toggle:focus-visible { outline:2px solid var(--terracotta); outline-offset:2px; }
  /* anchored sections clear the sticky main nav + jump bar */
  [id^="g-"], [id^="c-"] { scroll-margin-top:140px; }
  @media (max-width:560px){ .page-jump__toggle { display:none; } }

  /* ---------- Fabric 101 page ---------- */
  /* serif term subheads inside deep-dive accordion bodies (certs, construction) */
  .crit-term { font-family:"Canela Deck",serif; font-weight:400; font-size:18px; letter-spacing:normal; text-transform:none; color:var(--ink); margin:0 0 6px; }
  .crit-block + .crit-block { margin-top:2px; }
  /* quick glossary */
  .glossary { max-width:840px; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:0 40px; }
  .gloss-item { padding:18px 0; border-bottom:1px solid var(--line); }
  .gloss-item dt { font-family:"Canela Deck",serif; font-weight:400; font-size:19px; color:var(--ink); margin-bottom:5px; }
  .gloss-item dd { margin:0; }
  .gloss-item dd p { font-size:15px; color:var(--ink-soft); line-height:1.55; margin:0; }
  @media (max-width:680px){ .glossary { grid-template-columns:1fr; } .gloss-item { padding:15px 0; } }

  /* ---------- About page feedback CTA ---------- */
  .about-cta { max-width:720px; background:var(--surface-2); border:1px solid var(--line); border-radius:20px; padding:40px 38px; }
  .about-cta .eyebrow { color:var(--terracotta); }
  .about-cta h2 { font-family:"Canela Deck",serif; font-weight:400; font-size:clamp(26px,3.2vw,34px); line-height:1.05; letter-spacing:-.01em; margin:0 0 14px; }
  .about-cta h2 .accent { color:var(--terracotta); font-style:italic; }
  .about-cta p { font-size:17px; color:var(--ink-soft); line-height:1.6; margin:0 0 14px; }
  .about-cta__actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:22px; }
  @media (max-width:520px){ .about-cta { padding:30px 24px; } .about-cta__actions .btn { width:100%; justify-content:center; } }

  /* ---------- Shop Smarter guide tables (desktop table -> mobile cards) ---------- */
  .guide-table-wrap { margin:6px 0 10px; max-width:880px; overflow:hidden; border:1px solid var(--line); border-radius:16px; }
  .guide-table { width:100%; border-collapse:collapse; font-size:15px; line-height:1.5; }
  .guide-table thead th { text-align:left; vertical-align:bottom; padding:11px 16px; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); background:var(--surface-2); border-bottom:1px solid var(--line); white-space:nowrap; }
  .guide-table td { text-align:left; vertical-align:top; padding:13px 16px; border-bottom:1px solid var(--line); color:var(--ink); }
  .guide-table tbody tr:last-child td { border-bottom:none; }
  .guide-table tbody tr:hover { background:color-mix(in srgb, var(--surface-2) 60%, transparent); }
  .guide-table .gt-group { font-weight:600; color:var(--terracotta-deep); white-space:nowrap; }
  @media (max-width:760px){
    .guide-table-wrap { border:none; border-radius:0; overflow:visible; }
    .guide-table thead { position:absolute; left:-9999px; }
    .guide-table, .guide-table tbody, .guide-table tr, .guide-table td { display:block; width:100%; }
    .guide-table tr { border:1px solid var(--line); border-radius:14px; background:var(--surface-2); padding:6px 2px; margin-bottom:14px; }
    .guide-table td { border:none; padding:7px 16px; }
    .guide-table td::before { content:attr(data-label); display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:2px; }
    .guide-table td.gt-group { font-size:16px; padding-top:12px; }
    .guide-table td.gt-group::before { display:none; }
  }

  /* ---------- Cost Per Wear calculator modal ---------- */
  .cpw-card { max-width:560px; text-align:left; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); overflow-y:auto; }
  .cpw-modes { display:flex; gap:6px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:4px; margin:18px 0; }
  .cpw-mode { flex:1; border:none; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--ink-soft); padding:8px 10px; border-radius:100px; cursor:pointer; transition:background .2s ease, color .2s ease; }
  .cpw-mode.is-active { background:var(--surface-2); color:var(--ink); box-shadow:0 1px 3px rgba(46,42,36,.08); }
  .cpw-mode:focus-visible { outline:2px solid var(--terracotta); outline-offset:2px; }
  .cpw-panel { display:flex; flex-direction:column; gap:14px; }
  .cpw-panel[hidden] { display:none; }
  .cpw-field { display:flex; flex-direction:column; gap:5px; }
  .cpw-field label { font-size:13px; font-weight:600; color:var(--ink); }
  .cpw-field input { font:inherit; font-size:15px; padding:10px 12px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface-2); color:var(--ink); width:100%; }
  .cpw-field input:focus { outline:none; border-color:var(--terracotta); }
  .cpw-money { display:flex; align-items:center; border:1.5px solid var(--line); border-radius:10px; background:var(--surface-2); }
  .cpw-money:focus-within { border-color:var(--terracotta); }
  .cpw-money span { padding:0 2px 0 12px; color:var(--ink-soft); font-size:15px; }
  .cpw-money input { border:none; background:none; }
  .cpw-money input:focus { border:none; }
  .cpw-help { font-size:12.5px; color:var(--ink-soft); line-height:1.45; margin:0; }
  .cpw-compare { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .cpw-col { display:flex; flex-direction:column; gap:12px; }
  .cpw-col h4 { margin:0 0 2px; font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--terracotta-deep); }
  .cpw-result { margin:18px 0 6px; padding:16px 18px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
  .cpw-result__primary { font-size:17px; font-weight:600; color:var(--ink); }
  .cpw-result__detail { font-size:14px; color:var(--ink-soft); margin-top:6px; white-space:pre-line; }
  .cpw-interp { margin-top:12px; }
  .cpw-interp strong { display:block; color:var(--terracotta-deep); font-size:14px; margin-bottom:3px; }
  .cpw-interp span { font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
  .cpw-cta { margin-top:18px; }
  @media (max-width:480px){ .cpw-compare { grid-template-columns:1fr; } }