@charset "utf-8";
/* ============================================================================
   SiteMend — design system
   Concept: "the mend is visible." Warm ink on bone paper, a brass seam.
   Caladea (OFL) for display, system grotesque for text.
   ========================================================================= */

@layer reset, type, tokens, base, seam, layout, nav, blocks, page, motion;

/* ---------------------------------------------------------------- fonts -- */
@layer type {
  @font-face{
    font-family:"Caladea";src:url("fonts/Caladea-Regular.woff") format("woff");
    font-weight:400;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:"Caladea";src:url("fonts/Caladea-Bold.woff") format("woff");
    font-weight:700;font-style:normal;font-display:swap;
  }
  @font-face{
    font-family:"Caladea";src:url("fonts/Caladea-Italic.woff") format("woff");
    font-weight:400;font-style:italic;font-display:swap;
  }
}

@layer reset {
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  img,svg{display:block;max-width:100%}
  button,input,textarea,select{font:inherit;color:inherit}
  ul,ol{list-style:none;padding:0}
}

/* --------------------------------------------------------------- tokens -- */
@layer tokens {
  :root{
    color-scheme:light dark;

    /* Paper is the default. Warm, not white. */
    --paper:    light-dark( oklch(.962 .011 86), oklch(.152 .012 62) );
    --paper-2:  light-dark( oklch(.934 .014 84), oklch(.126 .012 62) );
    --card:     light-dark( oklch(.988 .006 86), oklch(.196 .013 62) );
    --ink:      light-dark( oklch(.185 .016 60), oklch(.945 .009 86) );
    --ink-2:    light-dark( oklch(.405 .019 60), oklch(.775 .014 84) );
    --ink-3:    light-dark( oklch(.505 .020 60), oklch(.640 .016 82) );
    --rule:     light-dark( oklch(.845 .015 78), oklch(.290 .014 62) );
    --rule-2:   light-dark( oklch(.893 .012 80), oklch(.232 .013 62) );

    /* The seam. Brass. Used sparingly — it means "mended". */
    --seam:     light-dark( oklch(.520 .118 62), oklch(.780 .120 74) );
    --seam-2:   light-dark( oklch(.600 .130 62), oklch(.700 .115 72) );
    --seam-wash:light-dark( oklch(.945 .035 78), oklch(.243 .045 60) );
    --on-seam:  light-dark( oklch(.985 .008 86), oklch(.140 .015 62) );

    /* "broken" state — only in the before/after */
    --rust:     light-dark( oklch(.480 .130 32), oklch(.760 .120 40) );
    --rust-wash:light-dark( oklch(.948 .028 40), oklch(.245 .045 32) );

    --serif: "Caladea", "Iowan Old Style", "Palatino Linotype", Palatino,
             Georgia, "Times New Roman", serif;
    --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
            "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale — display is Caladea, everything else grotesque */
    --t-mega:  clamp(2.7rem, 1.3rem + 5.1vw, 5.6rem);
    --t-h1:    clamp(2.25rem, 1.4rem + 3.2vw, 4.05rem);
    --t-h2:    clamp(1.85rem, 1.35rem + 1.9vw, 2.85rem);
    --t-h3:    clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
    --t-h4:    clamp(1.02rem, .97rem + .26vw, 1.16rem);
    --t-lede:  clamp(1.12rem, 1.02rem + .5vw, 1.4rem);
    --t-body:  1.0rem;
    --t-small: .885rem;
    --t-micro: .735rem;

    --gutter: clamp(1.15rem, .35rem + 3vw, 4rem);
    --stack:  clamp(3.75rem, 2.4rem + 6.4vw, 8rem);
    --ease:   cubic-bezier(.2,.85,.3,1);
    --measure: 64ch;
  }
}

/* ----------------------------------------------------------------- base -- */
@layer base {
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:var(--sans);font-size:var(--t-body);line-height:1.62;
    letter-spacing:-.005em;-webkit-font-smoothing:antialiased;
    overflow-x:hidden;position:relative;
  }
  /* Paper grain. Cheap, fixed, non-interactive. */
  body::before{
    content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
    opacity:light-dark(.19,.085);mix-blend-mode:light-dark(multiply,screen);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  }

  h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.022em;
           line-height:1.04;text-wrap:balance}
  h4{font-family:var(--sans);font-weight:640;letter-spacing:-.014em;
     font-size:var(--t-h4);line-height:1.3}
  p{text-wrap:pretty}
  a{color:inherit;text-underline-offset:.22em;
    text-decoration-thickness:from-font;text-decoration-color:var(--rule)}
  a:hover{text-decoration-color:var(--seam)}

  ::selection{background:var(--seam);color:var(--on-seam)}
  :focus-visible{outline:2px solid var(--seam);outline-offset:3px}

  .vh{position:absolute;width:1px;height:1px;overflow:hidden;
      clip-path:inset(50%);white-space:nowrap}
  .skip{position:absolute;left:.5rem;top:.5rem;z-index:200;background:var(--ink);
        color:var(--paper);padding:.6rem 1rem;font-size:var(--t-small);
        font-weight:600;translate:0 -180%}
  .skip:focus-visible{translate:0 0}

  .mono{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.09em;
        text-transform:uppercase;color:var(--ink-3)}
  .num{font-variant-numeric:tabular-nums}
  em,.it{font-family:var(--serif);font-style:italic}
}

/* ------------------------------------------------------------- the seam -- */
@layer seam {
  /* A hairline that knits itself shut. The one motif that repeats. */
  .seam{display:block;width:100%;height:11px;overflow:visible;color:var(--seam)}
  .seam path{fill:none;stroke:currentColor;stroke-width:1.4;
             stroke-linecap:round;vector-effect:non-scaling-stroke}
  .seam .stitch{stroke-width:1.1;opacity:.85}

  hr.rule{border:0;border-top:1px solid var(--rule);margin:0}
}

/* --------------------------------------------------------------- layout -- */
@layer layout {
  .shell{width:min(100% - (var(--gutter)*2), 1240px);margin-inline:auto}
  .band{padding-block:var(--stack)}
  .band-t{border-top:1px solid var(--rule)}
  .sunk{background:var(--paper-2)}

  /* Editorial grid: a narrow marginal column + the main text column. */
  .ed{display:grid;gap:1.6rem clamp(1.5rem,4vw,4.5rem)}
  @media (min-width:900px){ .ed{grid-template-columns:12rem minmax(0,1fr)} }

  .marg{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;
        text-transform:uppercase;color:var(--ink-3);padding-top:.5rem}
  .marg b{display:block;color:var(--seam);font-weight:400;margin-bottom:.25rem}

  .prose{max-width:var(--measure)}
  .prose p + p{margin-top:1.05em}
  .prose p{color:var(--ink-2)}
  .lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);
        max-width:48ch;text-wrap:pretty}
}

/* ------------------------------------------------------------------ nav -- */
@layer nav {
  .masthead{border-bottom:1px solid var(--rule);background:var(--paper);
            position:sticky;top:0;z-index:60;view-transition-name:masthead}
  .masthead-in{display:flex;align-items:center;justify-content:space-between;
               gap:1.5rem;padding-block:.85rem}
  .wordmark{display:inline-flex;align-items:center;gap:.55rem;flex-wrap:nowrap;
            white-space:nowrap;text-decoration:none;font-family:var(--serif);
            font-weight:700;font-size:1.22rem;letter-spacing:-.028em}
  .wordmark svg{width:26px;height:26px;flex:none;overflow:visible}
  .wordmark .m-break{stroke:var(--ink);stroke-width:2.2;fill:none;
                     stroke-linecap:round;stroke-linejoin:round}
  .wordmark .m-seam{stroke:var(--seam);stroke-width:2.8;fill:none;
                    stroke-linecap:round;stroke-linejoin:round}
  .wordmark .m-st{stroke:var(--seam);stroke-width:1.5;fill:none;
                  stroke-linecap:round;opacity:.75}
  .wordmark svg{width:25px;height:25px}

  .nav{display:flex;align-items:center;gap:clamp(.9rem,2vw,1.7rem);
       font-size:var(--t-small);margin-left:auto}
  .nav a{text-decoration:none;color:var(--ink-2);white-space:nowrap;
         padding-block:.2rem;border-bottom:1.5px solid transparent}
  .nav a:hover{color:var(--ink);border-bottom-color:var(--rule)}
  .nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--seam)}
  .masthead-in > .cta{text-decoration:none;color:var(--ink);font-weight:600;
    font-size:var(--t-small);white-space:nowrap;padding:.4rem .85rem;
    border:1px solid var(--seam);border-radius:2px}
  .masthead-in > .cta:hover{background:var(--seam);color:var(--on-seam)}

  /* Two-row masthead on narrow screens — no hamburger, nothing hidden. */
  @media (max-width:760px){
    .masthead-in{flex-wrap:wrap;gap:.55rem .9rem;padding-block:.7rem}
    .wordmark{font-size:1.1rem}
    .masthead-in > .cta{margin-left:auto}
    .nav{order:3;flex-basis:100%;margin-left:0;gap:1.15rem;font-size:.8rem;
         border-top:1px solid var(--rule-2);padding-top:.5rem;
         overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
    .nav::-webkit-scrollbar{display:none}
  }
}

/* --------------------------------------------------------------- blocks -- */
@layer blocks {
  /* Buttons: squared and editorial. No pills anywhere on this site. */
  .btn{display:inline-flex;align-items:center;gap:.6rem;border:0;cursor:pointer;
       background:var(--ink);color:var(--paper);text-decoration:none;
       font-family:var(--sans);font-weight:600;font-size:var(--t-small);
       letter-spacing:-.01em;padding:.82rem 1.35rem;border-radius:2px;
       transition:background .2s var(--ease),color .2s var(--ease)}
  .btn:hover{background:var(--seam);color:var(--on-seam)}
  .btn .arw{width:1.1em;height:1.1em;stroke:currentColor;fill:none;
            stroke-width:1.8;transition:translate .25s var(--ease)}
  .btn:hover .arw{translate:.22em 0}
  .btn.line{background:transparent;color:var(--ink);
            box-shadow:inset 0 0 0 1px var(--rule)}
  .btn.line:hover{background:transparent;color:var(--seam);
                  box-shadow:inset 0 0 0 1px var(--seam)}

  /* Link that underlines from the left on hover */
  .ulink{text-decoration:none;background-image:linear-gradient(var(--seam),var(--seam));
         background-size:0% 1.5px;background-repeat:no-repeat;
         background-position:0 100%;padding-bottom:.12em;
         transition:background-size .32s var(--ease)}
  .ulink:hover{background-size:100% 1.5px}

  /* Numbered editorial rows */
  .rows{border-top:1px solid var(--rule)}
  .row{display:grid;gap:.4rem clamp(1.25rem,4vw,4.5rem);
       grid-template-columns:1fr;padding-block:clamp(1.5rem,3.4vw,2.6rem);
       border-bottom:1px solid var(--rule-2);align-items:start}
  @media (min-width:820px){
    .row{grid-template-columns:3.5rem minmax(0,15rem) minmax(0,1fr)}
  }
  .row-n{font-family:var(--mono);font-size:var(--t-micro);color:var(--seam);
         letter-spacing:.1em;padding-top:.42em}
  .row h3{font-size:var(--t-h3);line-height:1.12}
  .row p{color:var(--ink-2);max-width:48ch;font-size:var(--t-small);
         line-height:1.65}

  /* Cards, used sparingly and never in a tidy row of three */
  .card{background:var(--card);border:1px solid var(--rule);padding:
        clamp(1.35rem,2.6vw,2rem);border-radius:3px}

  /* Pull quote */
  .pull{font-family:var(--serif);font-size:clamp(1.35rem,1rem + 1.7vw,2.15rem);
        line-height:1.24;letter-spacing:-.018em;max-width:24ch;
        border-left:2px solid var(--seam);padding-left:clamp(1rem,2.4vw,1.9rem)}

  /* Definition-style table (pricing, specs) */
  .spec{width:100%;border-collapse:collapse;font-size:var(--t-small)}
  .spec th,.spec td{text-align:left;padding:.95rem 1rem .95rem 0;
                    border-bottom:1px solid var(--rule-2);vertical-align:top}
  .spec thead th{font-family:var(--mono);font-size:var(--t-micro);
                 letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);
                 border-bottom-color:var(--rule);font-weight:400}
  .spec td:last-child,.spec th:last-child{padding-right:0}

  /* Footer */
  .foot{border-top:1px solid var(--rule);padding-block:2.6rem 3rem;
        font-size:var(--t-small);color:var(--ink-3)}
  .foot-grid{display:grid;gap:1.8rem clamp(1.5rem,4vw,4rem);
             grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .foot a{text-decoration:none;color:var(--ink-2);display:inline-block;
          padding-block:.16rem}
  .foot a:hover{color:var(--seam)}
  .foot h4{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.11em;
           text-transform:uppercase;color:var(--ink-3);font-weight:400;
           margin-bottom:.7rem}
}

/* --------------------------------------------------------------- motion -- */
@layer motion {
  /* Cross-document view transitions: native, no framework, no JS. */
  @view-transition{ navigation:auto }

  @media (prefers-reduced-motion:no-preference){
    ::view-transition-old(root){
      animation:vt-out .22s var(--ease) both}
    ::view-transition-new(root){
      animation:vt-in .34s var(--ease) both}
    @keyframes vt-out{to{opacity:0;translate:0 -6px}}
    @keyframes vt-in{from{opacity:0;translate:0 10px}}

    @supports (animation-timeline:view()){
      .rise{animation:rise linear both;animation-timeline:view();
            animation-range:entry 3% cover 22%}
      @keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}

      /* the seam knits itself as it scrolls into view */
      .seam path{animation:knit linear both;animation-timeline:view();
                 animation-range:entry 0% entry 92%}
      @keyframes knit{from{stroke-dasharray:0 1400;stroke-dashoffset:0}
                      to{stroke-dasharray:1400 0}}
    }
    @supports (transition-behavior:allow-discrete){
      .lift{opacity:1;translate:none;
            transition:opacity .7s var(--ease),translate .7s var(--ease)}
      @starting-style{ .lift{opacity:0;translate:0 14px} }
      .lift:nth-of-type(2){transition-delay:.07s}
      .lift:nth-of-type(3){transition-delay:.14s}
    }
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;
      animation-iteration-count:1!important;transition-duration:.001ms!important}
    @view-transition{ navigation:none }
  }
}

/* ----------------------------------------------------------------- page -- */
@layer page {

  /* ---- masthead-adjacent hero ---- */
  .hero{padding-block:clamp(3rem,2rem + 4.5vw,6rem) clamp(2.4rem,2rem + 3vw,4.2rem)}
  .hero-split{display:grid;gap:1.6rem clamp(2rem,6vw,6rem);align-items:end}
  @media (min-width:940px){
    .hero-split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
    .hero-split .lede{margin-bottom:.35em}
  }
  .hero h1{font-size:var(--t-mega);letter-spacing:-.035em;max-width:13ch}
  .hero h1 .mend{color:var(--seam);font-style:italic}
  .hero-foot{display:grid;gap:2rem clamp(2rem,6vw,6rem);margin-top:
             clamp(2.2rem,4vw,3.4rem);align-items:end}
  @media (min-width:860px){ .hero-foot{grid-template-columns:minmax(0,1fr) auto} }
  .hero-cta{display:flex;gap:.7rem;flex-wrap:wrap}

  /* ---- vitals ---- */
  .vitals{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
          padding-block:1.5rem}
  .vitals-in{display:grid;gap:1.4rem clamp(1.5rem,4vw,3.5rem)}
  @media (min-width:900px){ .vitals-in{grid-template-columns:12rem 1fr auto} }
  .vlist{display:flex;flex-wrap:wrap;gap:1.6rem clamp(1.8rem,5vw,3.6rem)}
  .vlist div{min-width:5.5rem}
  .vlist dt{font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.1em;
            text-transform:uppercase;color:var(--ink-3);margin-bottom:.28rem}
  .vlist dd{font-family:var(--serif);font-size:1.62rem;font-weight:700;
            letter-spacing:-.028em;line-height:1;font-variant-numeric:tabular-nums}
  .vlist dd small{font-family:var(--sans);font-size:.5em;font-weight:500;
                  color:var(--ink-3);letter-spacing:0;margin-left:.22em}
  .vnote{font-size:var(--t-micro);color:var(--ink-3);max-width:30ch;
         line-height:1.55}
  .vnote b{color:var(--ink-2);font-weight:600}

  /* ---- before / after: side by side, nothing hidden ---- */
  .ba{display:grid;gap:clamp(1.5rem,3vw,2.4rem);margin-top:clamp(2rem,4vw,3rem)}
  @media (min-width:880px){ .ba{grid-template-columns:1fr 1fr} }
  .ba-half{margin:0;container-type:inline-size}
  .ba-cap{display:flex;align-items:center;gap:.55rem;font-family:var(--mono);
          font-size:var(--t-micro);letter-spacing:.1em;text-transform:uppercase;
          color:var(--ink-3);margin-bottom:.75rem}
  .ba-cap i{width:7px;height:7px;border-radius:50%;flex:none}
  .ba-cap .d-b{background:var(--rust)}
  .ba-cap .d-a{background:var(--seam)}
  .ba-frame{border:1px solid var(--rule);border-radius:3px;overflow:hidden;
            background:var(--card);box-shadow:0 1px 2px rgb(0 0 0/.04),
            0 18px 40px -28px rgb(0 0 0/.28)}
  .ba-bar{display:flex;align-items:center;gap:.35rem;padding:.5rem .7rem;
          border-bottom:1px solid var(--rule-2);background:var(--paper-2)}
  .ba-bar i{width:7px;height:7px;border-radius:50%;background:var(--rule);flex:none}
  .ba-bar span{margin-left:.4rem;font-family:var(--mono);font-size:.63rem;
               color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;
               white-space:nowrap}
  .ba-pane{min-height:clamp(330px,62cqi,400px);display:flex;flex-direction:column}

  /* the 2011 site */
  .old{font-family:"Times New Roman",Times,serif;background:#fff;color:#111;
       line-height:1.3}
  .old-hd{background:#1e3f8f;color:#fff;padding:.4rem .6rem;display:flex;
          justify-content:space-between;gap:.5rem;font-weight:700;
          font-size:clamp(.58rem,2.6cqi,.8rem)}
  .old-nv{background:#dde2ee;border-bottom:2px solid #8d99b8;padding:.22rem .6rem;
          font-size:clamp(.5rem,2.1cqi,.63rem);color:#123070}
  .old-nv span{margin-right:.5rem;text-decoration:underline}
  .old-bd{display:grid;grid-template-columns:1.8fr 1fr;gap:.7rem;
          padding:.5rem .6rem .8rem;flex:1}
  .old h4{font-family:inherit;font-size:clamp(.78rem,4.2cqi,1.2rem);color:#8b0000;
          margin-bottom:.28rem;font-weight:700}
  .old p{font-size:clamp(.52rem,2.2cqi,.68rem);margin-bottom:.38rem}
  .old-side{border:1px solid #99a;background:#f5f5ef;padding:.34rem .4rem}
  .old-side b{font-size:clamp(.5rem,2.1cqi,.63rem);color:#123070;display:block;
              margin-bottom:.2rem}
  .old-side li{font-size:clamp(.46rem,1.9cqi,.59rem);list-style:square;
               margin-left:.85rem}
  .old-bdg{display:inline-block;border:1px solid #999;background:#eee;
           font-size:clamp(.43rem,1.75cqi,.55rem);padding:.08rem .25rem;
           margin-right:.2rem;color:#444}
  .old-hit{font-family:var(--mono);font-size:clamp(.43rem,1.75cqi,.55rem);color:#666}
  .old-img{border:1px solid #aaa;background:#f7f7f2;color:#777;text-align:center;
           font-family:var(--mono);font-size:clamp(.45rem,1.85cqi,.57rem);
           padding:clamp(.6rem,4.5cqi,1.3rem) .4rem;margin-top:.45rem}
  .old-img span{display:block;font-size:1.5em;color:#999}
  .old-ft{border-top:1px solid #99a;background:#ecece4;text-align:center;
          padding:.4rem;font-size:clamp(.43rem,1.75cqi,.56rem);color:#33406b;
          line-height:1.7;margin-top:auto}

  /* the rebuilt site */
  .nw{background:var(--card)}
  .nw-hd{display:flex;justify-content:space-between;align-items:center;
         padding:.55rem clamp(.6rem,3.4cqi,1.05rem);
         border-bottom:1px solid var(--rule-2)}
  .nw-hd b{font-family:var(--serif);font-size:clamp(.64rem,2.9cqi,.9rem);
           letter-spacing:-.02em}
  .nw-hd span{font-family:var(--mono);font-size:clamp(.46rem,2cqi,.62rem);
              color:var(--seam)}
  .nw-nv{display:flex;gap:clamp(.45rem,2.8cqi,1rem);
         padding:.42rem clamp(.6rem,3.4cqi,1.05rem);
         border-bottom:1px solid var(--rule-2);
         font-size:clamp(.46rem,2cqi,.62rem);color:var(--ink-3)}
  .nw-bd{padding:clamp(.85rem,4.6cqi,1.5rem) clamp(.6rem,3.4cqi,1.05rem);flex:1;
         display:flex;flex-direction:column}
  .nw-top{margin-bottom:clamp(.9rem,4.2cqi,1.4rem);display:flex;
          flex-direction:column;align-items:flex-start}
  .nw h4{font-family:var(--serif);font-weight:700;
         font-size:clamp(.95rem,6.4cqi,1.85rem);line-height:1.03;
         letter-spacing:-.028em;max-width:18ch}
  .nw .sub{font-size:clamp(.52rem,2.3cqi,.75rem);color:var(--ink-2);
           margin-top:.4rem;max-width:34ch}
  .nw-btn{background:var(--ink);color:var(--paper);
          font-size:clamp(.5rem,2.2cqi,.7rem);font-weight:600;
          padding:.42rem .85rem;border-radius:2px;white-space:nowrap;
          margin-top:clamp(.55rem,2.6cqi,.9rem)}
  .nw-cards{display:grid;grid-template-columns:repeat(3,1fr);
            gap:clamp(.35rem,2.2cqi,.7rem);margin-top:auto}
  .nw-card{border:1px solid var(--rule);padding:clamp(.45rem,2.6cqi,.8rem);
           background:var(--paper)}
  .nw-card b{display:block;font-family:var(--serif);
             font-size:clamp(.8rem,4.4cqi,1.25rem);line-height:1;
             letter-spacing:-.03em}
  .nw-card i{display:block;color:var(--seam);font-style:normal;
             font-size:clamp(.46rem,2.1cqi,.64rem);margin:.14rem 0 .28rem}
  .nw-card p{font-size:clamp(.43rem,1.85cqi,.58rem);color:var(--ink-3);
             line-height:1.35}

  /* ---- FAQ ---- */
  .faq{border-top:1px solid var(--rule)}
  .faq details{border-bottom:1px solid var(--rule-2)}
  .faq summary{cursor:pointer;list-style:none;padding-block:1.15rem;
               display:flex;gap:1.2rem;align-items:baseline;
               font-family:var(--serif);font-size:var(--t-h4);font-weight:700;
               letter-spacing:-.015em}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";margin-left:auto;color:var(--seam);
                      font-family:var(--sans);font-weight:400;font-size:1.3em;
                      line-height:1}
  .faq details[open] summary::after{content:"–"}
  .faq summary:hover{color:var(--seam)}
  .faq .ans{padding-bottom:1.3rem;color:var(--ink-2);max-width:58ch;
            font-size:var(--t-small);line-height:1.68}
  .faq .ans p + p{margin-top:.8em}

  /* ---- step blocks ---- */
  .stage{border-top:1px solid var(--rule);padding-block:clamp(2rem,4vw,3.2rem)}
  .stage-h{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:1.1rem}
  .stage-h .n{font-family:var(--mono);font-size:var(--t-micro);color:var(--seam);
              letter-spacing:.1em}
  .stage h3{font-size:var(--t-h2)}
  .stage-body{display:grid;gap:1.6rem clamp(1.5rem,5vw,4.5rem);max-width:66rem}
  @media (min-width:900px){
    .stage-body{grid-template-columns:minmax(0,1fr) minmax(0,17rem)}
  }
  .stage-body ul li{padding-left:1.35rem;position:relative;color:var(--ink-2);
                    font-size:var(--t-small);margin-bottom:.55rem}
  .stage-body ul li::before{content:"";position:absolute;left:0;top:.62em;
                            width:.5rem;height:1px;background:var(--seam)}
  .aside{border-left:1px solid var(--rule);padding-left:1.4rem;
         font-size:var(--t-small);color:var(--ink-3)}
  .aside h4{color:var(--ink);margin-bottom:.45rem}

  /* ---- price blocks ---- */
  .price{display:grid;gap:0;border-top:1px solid var(--rule)}
  .price-row{display:grid;gap:.7rem clamp(1.5rem,4vw,4rem);
             padding-block:clamp(1.6rem,3.4vw,2.5rem);
             border-bottom:1px solid var(--rule-2)}
  @media (min-width:880px){
    .price-row{grid-template-columns:minmax(0,17rem) minmax(0,1fr) auto;
               align-items:start}
  }
  .price-row h3{font-size:var(--t-h3)}
  .price-row .amt{font-family:var(--serif);font-weight:700;
                  font-size:clamp(1.5rem,1.15rem + 1.3vw,2.1rem);
                  letter-spacing:-.03em;line-height:1;margin-top:.4rem;
                  white-space:nowrap}
  .price-row .who{color:var(--ink-3);font-size:var(--t-small);margin-top:.5rem}
  .price-row ul li{position:relative;padding-left:1.35rem;color:var(--ink-2);
                   font-size:var(--t-small);margin-bottom:.5rem}
  .price-row ul li::before{content:"";position:absolute;left:0;top:.62em;
                           width:.5rem;height:1px;background:var(--seam)}

  /* ---- contact ---- */
  .checklist li{position:relative;padding-left:2.1rem;margin-bottom:1rem;
                color:var(--ink-2);font-size:var(--t-small)}
  .checklist li b{color:var(--ink);display:block;font-weight:640;
                  font-size:var(--t-body)}
  .checklist li::before{content:counter(c,decimal-leading-zero);
    counter-increment:c;position:absolute;left:0;top:.15em;
    font-family:var(--mono);font-size:var(--t-micro);color:var(--seam)}
  .checklist{counter-reset:c}

  .bigmail{font-family:var(--serif);font-weight:700;
           font-size:clamp(1.4rem,.9rem + 2.6vw,3rem);letter-spacing:-.03em;
           text-decoration:none;display:inline-block;word-break:break-word}

  /* ---- 404 ---- */
  .four{min-height:58vh;display:flex;flex-direction:column;
        justify-content:center;padding-block:var(--stack)}
}

/* ------------------------------------------------------- seam divider -- */
@layer seam {
  .seamline{display:flex;align-items:center;gap:0;color:var(--seam)}
  .seamline span{flex:1;height:1px;background:var(--rule)}
  .seam-glyph{width:190px;height:12px;flex:none;overflow:visible}
  .seam-glyph path{fill:none;stroke:currentColor;stroke-width:1.5;
                   stroke-linecap:round;stroke-linejoin:round}
  .seam-glyph .stitch{stroke-width:1;opacity:.8}
}
@layer motion{
  @media (prefers-reduced-motion:no-preference){
    @supports (animation-timeline:view()){
      .seam-glyph path{animation:knit linear both;animation-timeline:view();
                       animation-range:entry 12% cover 30%}
      @keyframes knit{from{stroke-dasharray:0 300}to{stroke-dasharray:300 0}}
    }
  }
}