/* Guides: the support.html shell (dark, notebook stage, wordmark header with a pen mark under it, footer) plus the
   home page's three-step iPad block. Every guide is the same tiny shape: search phrase, one-line answer, three steps,
   what you get, one button, three related links. Pair with /assets/ink-anim.css, stage.css, wordmark.css. */
:root{--bg:#0B0B0E;--sur:#1C1C21;--ink:#F4F1EA;--mute:#9A9AA3;--or:#FF6A1A;--lime:#E8FF3A;--f:ui-rounded,"SF Pro Rounded",system-ui,sans-serif}
*{box-sizing:border-box;margin:0}
body{font:500 18px/1.55 var(--f);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:3px solid var(--or);outline-offset:3px}
.top{background:var(--sur);padding:18px max(24px,calc((100% - 1040px)/2 + 24px))}
.top a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.03em}
.top a img{width:38px;height:38px;border-radius:10px}
.chip{display:inline-block;font:700 12px/1 var(--f);letter-spacing:.08em;text-transform:uppercase;background:var(--lime);color:var(--bg);padding:8px 12px;border-radius:999px;margin-bottom:22px;text-decoration:none;transition:background .2s}
a.chip:hover{background:var(--ink)}
h1{font-weight:800;letter-spacing:-.04em;line-height:.98;font-size:clamp(38px,6vw,72px);text-wrap:balance;max-width:16ch}
h1 em{font-style:normal}
footer{background:var(--sur);color:var(--ink);padding:40px max(24px,calc((100% - 1040px)/2 + 24px)) 48px}
footer nav{display:flex;flex-wrap:wrap;gap:0 28px;font-weight:800}
footer nav a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none;transition:color .2s}footer nav a:hover{color:var(--or)}
footer p{margin-top:8px;font-size:15px;font-weight:600;color:var(--mute)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

main{max-width:1040px;width:100%;margin:0 auto;padding:clamp(56px,7vw,96px) 24px clamp(72px,9vw,128px);flex:1}
/* the one-line answer: the whole guide in a sentence, big, the "Done." in lime */
.ans{margin-top:clamp(20px,2.6vw,30px);max-width:34ch;font:700 clamp(22px,2.6vw,32px)/1.25 var(--f);letter-spacing:-.025em;text-wrap:pretty}
.ans b{color:var(--lime)}
.lead{margin-top:clamp(20px,2.6vw,30px);max-width:40ch;font:700 clamp(20px,2.2vw,24px)/1.35 var(--f);letter-spacing:-.015em;color:var(--mute);text-wrap:pretty}
/* eyebrow headings, same voice as the step numbers */
h2{font:800 13px/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
section{margin-top:clamp(48px,6vw,88px)}

/* three steps: one iPad, three moments. Cream line art, one pink ink. Container query stacks it under 640px (copied from index.html) */
.steps{container-type:inline-size;width:min(100%,900px);margin:clamp(40px,5vw,64px) auto 0}
.st{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,7cqw,64px)}
.st-i{position:relative;display:grid;justify-items:center;align-content:start;gap:16px}
.st-i svg{display:block;height:auto;overflow:visible}
.st-b .st-i svg:not(.st-ar){width:min(100%,230px)}
.st-i b{font:800 clamp(26px,4cqw,38px)/1 var(--f);letter-spacing:-.035em;color:var(--ink)}
.st-i .st-s{display:block;max-width:24ch;margin:10px auto 0;font:500 clamp(13px,1.35vw,15px)/1.45 var(--f);color:rgba(244,241,234,.5);text-wrap:balance}
.st-ar{position:absolute;top:33%;left:100%;width:clamp(28px,5cqw,44px);margin-left:calc(clamp(40px,7cqw,64px)/2 - clamp(28px,5cqw,44px)/2)}
@container (max-width:639px){
 .st{grid-template-columns:1fr;gap:56px;width:min(100%,340px);margin:0 auto}
 .st-b .st-i svg:not(.st-ar){width:min(100%,220px)}
 .st-ar{top:100%;left:50%;margin:8px 0 0 -20px;width:40px;transform:rotate(90deg)}
}
/* motion: the ink draws itself in on enter (all shapes are pathLength=1 paths), the words rise */
.mo .st path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) var(--d,0s)}
.mo .st.in path{stroke-dashoffset:0}
.mo .st-i:nth-child(2){--d:.3s}.mo .st-i:nth-child(3){--d:.6s}
.mo .st-b .st-i:nth-child(2) [style]{transition-delay:1.1s}
.mo .st-ar{--d:.9s}
.mo .st-i b{opacity:0;transform:translateY(8px);transition:opacity .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .35s),transform .8s cubic-bezier(.2,.7,.2,1) calc(var(--d,0s) + .35s)}
.mo .st.in .st-i b{opacity:1;transform:none}
/* guide additions: a 01 02 03 above each iPad, and a caption you can read at arm's length */
.st{counter-reset:s}
.st-i{counter-increment:s;text-align:center}
.st-i::before{content:counter(s,decimal-leading-zero);font:800 13px/1 var(--f);letter-spacing:.1em;color:var(--lime)}
.st-i .st-s{font-size:clamp(15px,1.5vw,18px);color:rgba(244,241,234,.62)}

/* what you get: three or four emoji lines, two columns when there is room */
.get{list-style:none;padding:0;margin:22px 0 0;max-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 40px}
.get li{display:flex;align-items:center;gap:14px;font:700 clamp(19px,2vw,24px)/1.25 var(--f);letter-spacing:-.02em}
.get li span[aria-hidden]{flex:none;width:1.5em;text-align:center;font-size:1.2em;line-height:1}
@media(max-width:640px){.get{grid-template-columns:1fr}}

/* the one button (copied from index.html) and a quiet status line */
.cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:800 clamp(17px,1.9vw,20px)/1 var(--f);text-decoration:none;padding:18px 30px;border-radius:999px;background:var(--lime);color:var(--bg);border:0;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.btn:hover{transform:scale(1.05,.94)}.btn:active{transform:scale(.96,1.04)}
@media(prefers-reduced-motion:no-preference){
.btn{position:relative;isolation:isolate;transition:transform .5s cubic-bezier(.3,1.7,.5,1)}
.btn:active{transform:scale(.94,1.06);transition-duration:.08s}
.btn::before{content:"";position:absolute;inset:-14px -22px;z-index:-1;border-radius:99px;background:radial-gradient(closest-side,var(--lime),transparent);opacity:0;transition:opacity .45s}
.btn:hover::before{opacity:.42}
}
.soon{font:600 15px/1.4 var(--f);color:var(--mute)}

/* related guides: three outlined pills, stacked on phones */
.rel{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel a{display:flex;align-items:center;min-height:64px;padding:16px 20px;border:1px solid rgba(244,241,234,.16);border-radius:18px;font:700 clamp(16px,1.6vw,19px)/1.25 var(--f);letter-spacing:-.015em;text-decoration:none;text-wrap:balance;transition:border-color .2s,color .2s}
.rel a:hover{border-color:var(--or);color:var(--or)}
@media(max-width:640px){.rel{grid-template-columns:1fr}}

/* guides index: one card per guide */
.cards{list-style:none;padding:0;margin:clamp(32px,4vw,48px) 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cards a{display:block;height:100%;padding:22px 24px;border:1px solid rgba(244,241,234,.16);border-radius:20px;text-decoration:none;transition:border-color .2s}
.cards a strong{display:block;font:800 clamp(20px,2vw,24px)/1.15 var(--f);letter-spacing:-.025em;text-wrap:balance}
.cards a span{display:block;margin-top:8px;font:500 16px/1.4 var(--f);color:var(--mute)}
/* hover: the border warms and a pen mark draws under the title (guides/index.html); the mark is the accent, so the text stays cream */
.cards a:hover{border-color:var(--or)}
@media(max-width:640px){.cards{grid-template-columns:1fr}}