/* mockbrd — shared shell for the signed-in app and auth pages */
:root{
  --s4:4px;--s8:8px;--s12:12px;--s16:16px;--s24:24px;--s32:32px;--s40:40px;--s48:48px;--s64:64px;
  --cream:#F2EBE3; --cream2:#E9DFD3; --surface:#FBF7F2;
  --ink:#141210; --ink2:#1C1917;
  /* Three reds, and the difference between them is what the text on top of
     them needs, not taste. --red is the mark: the bird, the rules, the
     bullets, the scan line — shapes, where contrast is not a reading
     question. --red-fill is the same red a half-step down, used ONLY where
     white type sits on it: #E8452B under white is 3.95:1 and the floor for
     body-sized type is 4.5, so every button on the site was a shade short of
     legible. #D63D22 clears it at 4.62 and is not a color anybody will
     notice has moved. --red-ink is red used AS type on a pale ground, which
     is the harder direction: 3.34:1 on the cream, and this clears 4.97. */
  --red:#E8452B; --red-fill:#D63D22; --red-ink:#BC3016; --red-dark:#C6371F;
  /* Warm graphite, not a light gray. #7C7269 never cleared 4.5:1 on any
     ground this site uses — 3.98 on the cream, 3.57 in a step circle — so
     every secondary line on every page was a shade under legible, which is
     what reads as "washed out" long before anybody calls it a contrast
     problem. Same hue and the same chroma, six steps down: it clears
     everywhere and looks more deliberate for it. */
  --mute:#6A615A; --line:#DCD1C4; --line-dark:#2E2A26;
  --f-display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* The wordmark only. Kept separate from --f-display so the logo can change
     face without dragging every heading with it. */
  --f-mark:"Outfit","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --r-sm:10px; --r-md:14px; --r-lg:20px;
  --shadow:0 1px 2px rgba(20,18,16,.04), 0 18px 40px -22px rgba(20,18,16,.34);
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:900;letter-spacing:-.035em;line-height:.98;margin:0}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:2px}
/* An author display rule outranks the UA [hidden] rule, so restore it. */
[hidden]{display:none !important}

/* logo — the accent lockup, bird over the missing i */
/* Outfit 500 at +1.5% tracking. The two constants in the geometry are the
   font's line box: with line-height:1 the baseline sits .13em above the box
   bottom and the b's ascender reaches .72em above that, so the ascender line
   is .85em up and the .15em is what is left above it. They sum to 1. */
.lk{position:relative;display:inline-block;line-height:1;white-space:nowrap;text-decoration:none;color:inherit;
    --bird:.57em;--clear:.12em;padding-top:calc(var(--bird) + var(--clear) - .15em);
    font-family:var(--f-mark);font-weight:500;letter-spacing:.015em;font-size:26px}
.lk .w{margin-right:-.015em}
.lk .m{position:absolute;left:75.6%;bottom:calc(.85em + var(--clear));height:var(--bird);width:auto;transform:translateX(-43.57%);overflow:visible}
.lk .m path{fill:var(--red)}

/* logo — the stacked lockup, bird centerd over the word. Used where the mark
   stands on its own and has room: auth cards, the legal and support pages.
   It ships as one SVG with the wordmark drawn as paths, so it needs no font
   and cannot reflow while Outfit is still loading. */
.lk-stack{display:block;line-height:0;text-decoration:none}
.lk-stack img{display:block;width:156px;height:auto;margin:0 auto}
@media (max-width:480px){ .lk-stack img{width:132px} }
/* The auth pages carry the same lockup as the header and the footer. It was
   the stacked one here, on the argument that a centerd column wants a mark
   whose bird sits over the middle rather than over the "b/r" — but a
   customer meets this page before any other, and one mark everywhere is
   worth more than the half-pixel of optical centring that argument buys.
   Its own box is centerd; the bird leans right by design, on every surface. */
.auth-card .lk-stack{align-self:center;margin-bottom:var(--s24)}

/* ── branded surfaces ────────────────────────────────────────────────────
   A cream card on a cream page was correct and forgettable. These pages are
   the first and last thing anyone sees, so they get the landing page's
   texture: a dot field, a soft warm wash, and the bird large and faint
   behind the card. All decorative, all behind the content, none of it
   changing a single hit target. */
.tex{position:relative;isolation:isolate;overflow:hidden}
/* the watermark deliberately bleeds past the edge, so the surface has to
   clip it — otherwise it widens the page and mobile zooms out */
.tex::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:radial-gradient(circle at 1px 1px, rgba(20,18,16,.055) 1px, transparent 0);
  background-size:22px 22px;
}
.tex::after{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(760px 420px at 12% -6%, rgba(232,69,43,.10), transparent 62%),
    radial-gradient(680px 460px at 92% 104%, rgba(232,69,43,.07), transparent 60%);
}

/* The secondary motif: the mark itself, tiled. Two birds per tile on opposite
   diagonals so the repeat reads as a field rather than as rows, and faint
   enough that you notice it second, after the dots. */
.flock{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%20viewBox='0%200%20220%20220'%3E%3Cg%20fill='%23E8452B'%20fill-opacity='0.022'%3E%3Cg%20transform='translate(18%2024)%20rotate(-10)%20scale(0.05635)'%3E%3Cpath%20d='M109.1,7.4c.28.14,185.91,93.9,187.4,95.14,1.5,1.24,5.58,4.68,7.29,7.72,7.7,13.72,3.04,42.05,3.02,42.17.14-.1,33.78-22.72,53.23-28.42,19.5-5.71,34.17-7.28,51.73-5.61,17.56,1.67,27.08,5.71,43.52,12.09,16.44,6.38,56.71,31.99,56.71,31.99,0,0-10.04,1.67-16.5,2.52-8.32,1.1-13.12.72-21.38,2.26-13.93,2.6-21.67,5.27-34.46,11.38-29.93,14.3-37.6,36.62-62.36,57.67-24.76,21.04-38.76,32.88-65.58,51.24-26.82,18.36-224.23,92.95-224.23,92.95l-6.7,2.54,112.25-120.23c-.12-.04-36.45-12.87-48.51-19.24-12.08-6.38-18.64-10.47-29.67-18.53s-31.03-26.2-47.59-46.07C50.72,159.11,6.04,49.07,5.5,43.5,4.96,37.93,0,25.21,0,25.21l128.79,59.65,7.21,2.64L92.5,0l16.6,7.4Z'/%3E%3C/g%3E%3Cg%20transform='translate(128%20134)%20rotate(-10)%20scale(0.05635)'%3E%3Cpath%20d='M109.1,7.4c.28.14,185.91,93.9,187.4,95.14,1.5,1.24,5.58,4.68,7.29,7.72,7.7,13.72,3.04,42.05,3.02,42.17.14-.1,33.78-22.72,53.23-28.42,19.5-5.71,34.17-7.28,51.73-5.61,17.56,1.67,27.08,5.71,43.52,12.09,16.44,6.38,56.71,31.99,56.71,31.99,0,0-10.04,1.67-16.5,2.52-8.32,1.1-13.12.72-21.38,2.26-13.93,2.6-21.67,5.27-34.46,11.38-29.93,14.3-37.6,36.62-62.36,57.67-24.76,21.04-38.76,32.88-65.58,51.24-26.82,18.36-224.23,92.95-224.23,92.95l-6.7,2.54,112.25-120.23c-.12-.04-36.45-12.87-48.51-19.24-12.08-6.38-18.64-10.47-29.67-18.53s-31.03-26.2-47.59-46.07C50.72,159.11,6.04,49.07,5.5,43.5,4.96,37.93,0,25.21,0,25.21l128.79,59.65,7.21,2.64L92.5,0l16.6,7.4Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size:220px 220px;
}
/* the mark, oversized and nearly gone, as a watermark behind the card */
/* Filled, not outlined. The line version was more "drawn" but it read as a
   diagram; the solid mark sits back and behaves like a watermark, which is
   the job. Same size, corner and angle wherever it appears. */
.tex .watermark{
  position:absolute;z-index:-1;pointer-events:none;user-select:none;
  width:min(74vw,820px);height:auto;opacity:.055;
  right:-14vw;bottom:-16vh;transform:rotate(-8deg);
}
.tex .watermark path{fill:var(--red)}

/* ── particles ────────────────────────────────────────────────────────────
   A drift of soft dots between the flat dot grid and the one big mark. They
   vary in size and weight so the field reads as depth rather than as another
   pattern, and a mask fades the whole layer out toward the top so it never
   climbs into the content. */
.particles{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    radial-gradient(circle 90px  at 12% 82%, rgba(232,69,43,.055), transparent 70%),
    radial-gradient(circle 46px  at 26% 66%, rgba(232,69,43,.045), transparent 70%),
    radial-gradient(circle 130px at 40% 92%, rgba(232,69,43,.040), transparent 70%),
    radial-gradient(circle 30px  at 54% 74%, rgba(232,69,43,.060), transparent 70%),
    radial-gradient(circle 74px  at 68% 88%, rgba(232,69,43,.045), transparent 70%),
    radial-gradient(circle 38px  at 82% 62%, rgba(232,69,43,.055), transparent 70%),
    radial-gradient(circle 110px at 92% 84%, rgba(232,69,43,.035), transparent 70%),
    radial-gradient(circle 22px  at 18% 54%, rgba(232,69,43,.050), transparent 70%),
    radial-gradient(circle 58px  at 62% 50%, rgba(232,69,43,.030), transparent 70%),
    radial-gradient(circle 26px  at 34% 44%, rgba(232,69,43,.035), transparent 70%);
  -webkit-mask-image:linear-gradient(to top, #000 32%, rgba(0,0,0,.35) 68%, transparent 100%);
  mask-image:linear-gradient(to top, #000 32%, rgba(0,0,0,.35) 68%, transparent 100%);
}
@media (max-width:640px){ .tex .watermark{width:min(86vw,420px);right:-14vw;bottom:-6vh} }

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-display);font-weight:700;
     font-size:15px;line-height:1;padding:var(--s12) var(--s24);border-radius:var(--r-sm);border:1.5px solid var(--red-fill);
     background:var(--red-fill);color:#fff;cursor:pointer;text-decoration:none;transition:background .15s,border-color .15s}
.btn:hover{background:var(--red-dark);border-color:var(--red-dark)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--cream2);border-color:var(--ink)}
.btn.lg{font-size:17px;padding:var(--s16) var(--s32)}

.lbl{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.mono{font-family:var(--f-mono)}
.err{background:#FDECE8;border:1px solid #F3B9AC;color:#8E2413;border-radius:var(--r-sm);padding:var(--s12) var(--s16);font-size:14.5px}
.note{color:var(--mute);font-size:14px}
.ok{background:#EAF3EC;border:1px solid #B4D3BC;color:#1F5130;border-radius:var(--r-sm);padding:var(--s12) var(--s16);font-size:14.5px}

/* auth pages */
.auth-wrap{min-height:100vh;display:grid;place-items:center;padding:var(--s24)}
/* 440 rather than 400: the card gained a second way in, and at 400 the stack
   — mark, heading, Google, rule, two fields, button, two notes — read as a
   column of things rather than as one card. Wider is shorter, and the fields
   still sit well under the 60-character measure at this size. */
.auth-card{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
           box-shadow:0 1px 2px rgba(20,18,16,.04), 0 30px 60px -28px rgba(20,18,16,.30);
           padding:var(--s32);display:flex;flex-direction:column;gap:var(--s16);position:relative;z-index:1}
.auth-card{padding:var(--s40) var(--s32) var(--s32)}
/* The display face, at the weight and the tracking that face wants at this
   size. The first pass copied the settings off the marketing page's h1 —
   Archivo 900 at -0.035em — and those are display settings: at 76px that
   tracking is what makes a headline read as one shape, and at 22px it is
   what makes six letters collide. Weight goes the same way, and 700 is
   already what the site sets small display type in, on every button.

   So: same typeface as every other heading in the brand, sized well under
   the lockup so the order is read off the scale, and tracked for the size it
   is actually set at rather than for the size it was copied from. */
/* Archivo 700 at 22px is dense — the face is built for display sizes, and
   small and tight it comes out stubby and reads as the loudest thing on a
   card whose whole job is a quiet form. The body face at 600 is the weight
   the studio's own headings use, so the card now sounds like the rest of the
   product rather than like a poster. */
.auth-card h1{
  font-family:var(--f-body);font-size:20px;font-weight:600;letter-spacing:-.006em;
  line-height:1.2;text-align:center;color:var(--ink);
}
.auth-card .lk{align-self:center;font-size:38px;margin-bottom:var(--s24)}
@media (max-width:420px){ .auth-card .lk{font-size:32px} }
/* The standfirst under the heading ran the full width of the card, which put
   it wider than the heading it belongs to and gave the card two different
   measures. Held to roughly the heading's own measure it breaks at the
   sentence instead — "then $9 a month." / "Cancel any time." — and the two
   lines center under each other. `pretty` keeps a single word off the last
   line if the copy changes. */
.auth-card h1 + .note{
  margin-top:calc(var(--s8) * -1);
  max-width:34ch;margin-left:auto;margin-right:auto;text-wrap:pretty;
}
/* 24px rather than a 1.6 ratio, so the lines sit on the same 8pt grid as
   everything stacked around them — 1.6 of 14px is 22.4, which is not on it. */
.auth-card .note{text-align:center;line-height:24px}
/* Holding the second sentence together makes the break land at the full
   stop rather than wherever the measure happens to run out — it either fits
   beside the first or moves down whole, and never orphans "any time." */
.auth-card .note .nb{white-space:nowrap}
.auth-card .note + .note{margin-top:calc(var(--s8) * -1)}
/* ── continue with Google ────────────────────────────────────────────────
   Above the email form, because it is the quicker of the two ways in and
   the one most people will take, with a rule and the word "or" between them
   so the form below reads as the alternative rather than as the next step.
   Drawn only where a client id is set, so the gap closes to nothing on a
   deployment without one. Google renders the button itself — its size and
   wording are theirs — and all this sets is the room it sits in. */
.auth-card .gwrap{display:flex;flex-direction:column;gap:var(--s16)}
.auth-card .gwrap[hidden]{display:none}
/* Google draws its own button, so the only way to make it one of this card's
   buttons is to give it this card's shape from the outside: full width, the
   same 10px corner as Sign in, and the corner clipped rather than asked for
   — Google's own rounding is a pill, and a pill above a 10px button reads as
   two products stacked. */
/* Google draws its own button and sizes it itself — and draws a different,
   wider one to anybody already signed in to Google. Nothing here forces a
   width or clips a corner: both of those were how it came out cut off in
   Safari and a different shape again in Chrome. All this does is center
   whatever Google draws, and stop it ever growing past the card. */
.auth-card .gbtn{min-height:44px;display:flex;justify-content:center;align-items:center}
.auth-card .gbtn > div{max-width:100%}
.auth-card .gbtn[aria-busy="true"]{opacity:.5;pointer-events:none}
.auth-card .gor{display:flex;align-items:center;gap:var(--s12);color:var(--mute);font-size:13px}
.auth-card .gor::before,.auth-card .gor::after{content:"";flex:1;height:1px;background:var(--line)}
/* The heading gets 24 under it rather than the card's 16: it is a title, and
   a title one gap away from the first control reads as a label for it. */
.auth-card h1{margin-bottom:var(--s8)}
.auth-card h1 + .note{margin-bottom:0}
.auth-card .field{margin-top:var(--s8)}
/* Except straight after the "or" rule, where the card's own 16 is the gap —
   the rule is already a separator and does not need a second one under it. */
.auth-card .gwrap + .field{margin-top:0}
.auth-card .btn.lg{margin-top:var(--s8)}
.field{display:flex;flex-direction:column;gap:var(--s8)}
.field input{font-family:var(--f-body);font-size:16px;padding:12px 14px;border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--ink)}

/* Chrome paints autofilled fields its own pale blue (#E8F0FE) and there is no
   background property that beats it — the only lever is an inset shadow big
   enough to cover the field. The long transition defeats the fade-in it does
   on top of that. Firefox reads :autofill from the same block. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
input:autofill{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #FDF3F0 inset;
  box-shadow:0 0 0 1000px #FDF3F0 inset;
  caret-color:var(--ink);
  transition:background-color 9999s ease-in-out 0s;
}


/* document pages — legal, support */
.doc-wrap{max-width:680px;margin:0 auto;padding:var(--s48) var(--s24) var(--s64)}
.doc-wrap.tex{max-width:none;padding-left:max(var(--s24), calc((100vw - 680px)/2));padding-right:max(var(--s24), calc((100vw - 680px)/2))}
.doc-head{display:flex;flex-direction:column;align-items:center;gap:var(--s16);text-align:center;margin-bottom:var(--s48)}
.doc-head h1{font-size:38px}
.doc-head .note{margin:0}
.doc section{margin-bottom:var(--s40)}
.doc h2{font-size:22px;margin-bottom:var(--s12)}
/* Contents. Wraps to as many lines as it needs and reads as one block of
   links rather than a list with bullets nobody wanted. */
.toc{display:flex;flex-wrap:wrap;gap:var(--s8) var(--s16);margin-bottom:var(--s40);
     padding-bottom:var(--s24);border-bottom:1px solid var(--line)}
.doc .toc a{font-family:var(--f-mono);font-size:12px;color:var(--mute);text-decoration:none;
       border-bottom:1px solid transparent;padding-bottom:2px}
.doc .toc a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.doc h3{font-size:15px;margin-top:var(--s24);margin-bottom:var(--s8)}
.doc section{scroll-margin-top:var(--s24)}
.doc h3{font-size:16px;font-family:var(--f-body);font-weight:600;letter-spacing:0;margin:var(--s24) 0 var(--s4)}
.doc p{margin:0 0 var(--s12)}
.doc ul{margin:0 0 var(--s12);padding-left:1.15em}
.doc li{margin-bottom:var(--s4)}
.doc a{color:var(--red-ink)}
/* The lockup is a link, so the red link color was repainting the whole
   wordmark. It is the logo, not a link, whatever its tag. */
.doc a.lk{color:var(--ink)}
.doc a.lk:hover{color:var(--ink)}
.doc .rule{border:0;border-top:1px solid var(--line);margin:var(--s40) 0}
.doc .flag{background:#FDF6E8;border:1px solid #E8D4A8;border-radius:var(--r-sm);padding:var(--s16);font-size:14px;color:#6B5320}
.doc .back{display:inline-block;margin-top:var(--s24)}

/* ═══════════════════════════════════════════════════════════════════════
   THE PUBLISHED PAGES — docs, legal, support
   These are part of the product, not appendices to it: a customer who lands
   on /docs from a search result should meet the same site the landing page
   sells. So they get the header and footer the marketing page has, and the
   two-column shape every documentation site has for the same good reason —
   the section list stays on screen while you read, so you always know where
   you are and what else there is.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── header ─────────────────────────────────────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(242,235,227,.86); backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .in{
  max-width:1200px; margin:0 auto; padding:0 var(--s24);
  height:64px; display:flex; align-items:center; gap:var(--s24);
}
.site-head .lk{font-size:24px; margin-right:auto}
.site-nav{display:flex; align-items:center; gap:var(--s24)}
.site-nav a{
  font-size:14.5px; color:var(--mute); text-decoration:none;
  transition:color .14s;
}
.site-nav a:hover, .site-nav a[aria-current="page"]{color:var(--ink)}
/* .site-nav a is (0,0,2,0) and .btn is (0,0,1,0), so the nav rule repainted
   the call to action in the muted link color — red text on a red button.
   Matched at the same weight rather than nudged with !important. */
.site-nav a.btn, .site-nav a.btn:hover{color:#fff}
.site-nav a[aria-current="page"]{font-weight:600}
.site-head .btn{padding:10px var(--s16); font-size:14px}
.site-head .sep{width:1px; height:22px; background:var(--line); flex:none}
@media (max-width:720px){
  .site-head .in{gap:var(--s16); padding:0 var(--s16)}
  .site-nav .hide-sm, .site-head .sep{display:none}
}
/* On a phone the bar has room for the mark, one link and the button — and
   the button has to stay on one line, or it grows the header. */
@media (max-width:520px){
  .site-head .lk{font-size:21px}
  .site-head .in{gap:var(--s12)}
  .site-nav{gap:var(--s16)}
  .site-head .btn{padding:9px 12px; font-size:13px; white-space:nowrap}
}

/* ── footer ─────────────────────────────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--line); margin-top:var(--s64);
  background:var(--surface);
}
.site-foot .in{
  max-width:1200px; margin:0 auto; padding:var(--s40) var(--s24);
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s16) var(--s24);
}
/* .site-foot a is (0,1,1) and .lk is (0,1,0), so the footer link rule
   repainted the lockup in the muted link gray — the one thing in the footer
   that is the brand, drawn as if it were a nav item. Matched at (0,2,0),
   which is what it takes to win without !important. */
.site-foot .lk{font-size:22px; color:var(--ink)}
.site-foot nav{display:flex; flex-wrap:wrap; gap:var(--s16); margin-left:auto}
.site-foot a{color:var(--mute); text-decoration:none; font-size:14px}
.site-foot a:hover{color:var(--ink)}
.site-foot .fine{width:100%; margin:0; font-size:13px; color:var(--mute)}

/* ── the two-column page ────────────────────────────────────────────── */
.dp{
  max-width:1200px; margin:0 auto; padding:var(--s48) var(--s24) var(--s64);
  display:grid; grid-template-columns:232px minmax(0,1fr); gap:var(--s64);
  align-items:start;
}
.dp-side{position:sticky; top:88px; min-width:0}
/* Pages with no rail — support — run one column at full measure. */
.dp.one{grid-template-columns:minmax(0,1fr)}
.dp.one .dp-main{max-width:none}
.dp-side .eyebrow{
  display:block; font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--mute);
  margin-bottom:var(--s16);
}
/* One rail down the left, and the section you are in owns it. The link list
   is the only navigation on the page, so it says where you are as well as
   where you can go. */
.dp-nav{display:flex; flex-direction:column; border-left:1px solid var(--line)}
.dp-nav a{
  padding:7px var(--s16); margin-left:-1px;
  border-left:2px solid transparent;
  font-size:14px; line-height:1.35; color:var(--mute); text-decoration:none;
  transition:color .14s, border-color .14s;
}
.dp-nav a:hover{color:var(--ink)}
.dp-nav a.on{color:var(--ink); font-weight:600; border-left-color:var(--red)}
.dp-aside{
  margin-top:var(--s32); padding:var(--s16);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  font-size:13.5px; color:var(--mute); line-height:1.5;
}
.dp-aside b{display:block; color:var(--ink); font-size:14px; margin-bottom:4px}
.dp-aside a{color:var(--red-ink)}

.dp-main{max-width:720px; min-width:0}
.dp-hero{margin-bottom:var(--s40); padding-bottom:var(--s32); border-bottom:1px solid var(--line)}
.dp-hero h1{font-size:clamp(38px,5vw,54px); letter-spacing:-.04em}
.dp-hero .lede{margin:var(--s16) 0 0; font-size:18px; color:#4B443D; max-width:34em}
.dp-hero .stamp{
  display:inline-block; margin-bottom:var(--s16);
  font-family:var(--f-mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--mute);
}
.dp-hero .stamp::before{
  content:""; display:inline-block; width:22px; height:2px; background:var(--red);
  vertical-align:middle; margin-right:10px;
}

/* Sections read as blocks with air between them rather than as one column of
   paragraphs, and each starts clear of the sticky header when you jump to it. */
.dp-main section{scroll-margin-top:88px; padding-bottom:var(--s48)}
.dp-main section + section{border-top:1px solid var(--line); padding-top:var(--s48)}
.dp-main h2{font-size:28px; letter-spacing:-.03em; margin-bottom:var(--s16)}
.dp-main h3{
  font-family:var(--f-body); font-weight:600; font-size:16.5px; letter-spacing:0;
  margin:var(--s32) 0 var(--s8);
}
.dp-main p{margin:0 0 var(--s12); color:#3A3530}
.dp-main ul{margin:0 0 var(--s16); padding-left:1.15em; color:#3A3530}
.dp-main li{margin-bottom:var(--s4)}
.dp-main a{color:var(--red-ink)}
.dp-main a.lk, .dp-main a.lk:hover{color:var(--ink)}
/* Same trap as the header: a link rule scoped to the column outranks .btn
   and paints the button's own label red on red. */
.dp-main a.btn, .dp-main a.btn:hover, .sup-card a.btn, .sup-card a.btn:hover{color:#fff}

/* A key, and a defined term. Both were <strong> before, which made a
   keystroke, a control name and an emphasised word look identical. */
kbd{
  font-family:var(--f-mono); font-size:12.5px; line-height:1;
  padding:3px 6px; border:1px solid var(--line); border-bottom-width:2px;
  border-radius:5px; background:var(--surface); color:var(--ink);
  white-space:nowrap;
}
.dp-main .ctl{font-weight:600; color:var(--ink)}
.callout{
  margin:var(--s16) 0; padding:var(--s16) var(--s16) var(--s16) var(--s24);
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--red); border-radius:var(--r-sm);
  font-size:14.5px; color:#4B443D;
}
.callout p:last-child{margin-bottom:0}
.callout b{color:var(--ink)}

/* Two-column facts: format, limit, price. A table would be heavier than the
   content deserves and would not stack on a phone. */
.facts{display:grid; grid-template-columns:150px minmax(0,1fr); gap:var(--s8) var(--s24);
       margin:var(--s16) 0; font-size:15px}
.facts dt{font-family:var(--f-mono); font-size:12px; letter-spacing:.08em;
          text-transform:uppercase; color:var(--mute); padding-top:3px}
.facts dd{margin:0; color:#3A3530}
@media (max-width:520px){ .facts{grid-template-columns:1fr; gap:2px var(--s8)} 
  .facts dd{margin-bottom:var(--s8)} }

/* ── support ───────────────────────────────────────────────────────── */
.sup-grid{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:var(--s40); align-items:start}
.sup-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s32); box-shadow:var(--shadow);
}
.sup-card h2{font-size:20px; letter-spacing:-.02em; margin-bottom:var(--s8)}
.sup-card .mail{
  display:block; font-family:var(--f-mono); font-size:16px; color:var(--red-ink);
  margin:var(--s8) 0 var(--s16); word-break:break-word;
}
.sup-card p{font-size:14.5px; color:#4B443D; margin:0 0 var(--s12)}
.sup-card .btn{width:100%; margin-top:var(--s8)}
.sup-steps{display:flex; flex-direction:column; gap:var(--s24)}
.sup-step{
  display:grid; grid-template-columns:34px minmax(0,1fr); gap:var(--s16);
  align-items:start;
}
.sup-step .n{
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:var(--cream2); border:1px solid var(--line);
  font-family:var(--f-mono); font-size:12px; color:var(--mute);
}
.sup-step h3{margin:0 0 4px; font-family:var(--f-body); font-weight:600; font-size:16px; letter-spacing:0}
.sup-step p{margin:0; font-size:15px; color:#3A3530}
@media (max-width:900px){ .sup-grid{grid-template-columns:1fr} }

/* ── narrow ─────────────────────────────────────────────────────────── */
@media (max-width:980px){
  /* 1fr is minmax(auto,1fr), and the auto minimum is the column's own
     min-content — which on this page came out at 728px and pushed the whole
     grid off the side of a phone. minmax(0,1fr) lets it actually shrink. */
  .dp{grid-template-columns:minmax(0,1fr); gap:var(--s32); padding-top:var(--s32)}
  /* The rail becomes a scrolling strip that stays under the header, so the
     section list is still one tap away on a phone. */
  .dp-side{
    position:sticky; top:64px; z-index:40;
    margin:0 calc(var(--s24) * -1); padding:var(--s12) var(--s24);
    background:rgba(242,235,227,.94); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .dp-side .eyebrow, .dp-aside{display:none}
  .dp-nav{flex-direction:row; gap:var(--s8); border-left:0;
          overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
  .dp-nav::-webkit-scrollbar{display:none}
  .dp-nav a{
    flex:none; margin:0; padding:7px 12px; border:1px solid var(--line);
    border-radius:999px; font-size:13px; white-space:nowrap;
  }
  .dp-nav a.on{border-color:var(--ink); background:var(--ink); color:var(--cream)}
  .dp-main section{scroll-margin-top:126px}
}
@media (max-width:520px){
  .dp{padding-left:var(--s16); padding-right:var(--s16)}
  .dp-side{margin:0 calc(var(--s16) * -1); padding:var(--s12) var(--s16)}
  .site-foot .in{padding:var(--s32) var(--s16)}
}
/* Jumping to a section should feel like moving, not like teleporting — but
   only for people who have not asked the opposite. */
@media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }