/* guide.css · what a guide needs beyond the article itself: a way to keep it,
   a way to pass it on, who wrote it, what it rests on, and a print layout that
   makes "save as PDF" produce a document rather than a screenshot of a website.
   Light page (#FAFAF8), the site's system font stack, ink #17171A, square corners. */

.gshare{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gshare button{font:500 12.5px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.01em;color:#17171A;background:transparent;
  border:1px solid rgba(23,23,26,.22);padding:9px 12px;cursor:pointer;border-radius:0}
.gshare button:hover{border-color:#17171A}
.gshare button[data-done]{border-color:#17171A;background:#17171A;color:#FAFAF8}
.gshare-end{margin-top:26px}
.gshare-more{display:flex;flex-wrap:wrap;gap:8px;width:100%;margin-top:2px}
.gshare button[data-gshare="more"]{color:#5C5C64}

/* section links · at the end of every heading, quiet until wanted */
.wrap h2,.wrap h3{position:relative}
.ganchor{margin-left:8px;font:400 .8em -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5C5C64;text-decoration:none;opacity:0;transition:opacity .12s}
.wrap h2:hover .ganchor,.wrap h3:hover .ganchor,.ganchor:focus{opacity:1}
.ganchor[data-done]{opacity:1;color:#17171A}
@media (hover:none){.ganchor{opacity:.45}}

.gprint{display:none}

.gsources{margin:14px 0 0;padding:0 0 0 20px;font:400 14px/1.7 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#17171A}
.gsources li{margin:6px 0;padding-left:4px}
.gsources a{color:#17171A}
.gsources span{color:#5C5C64;font-size:12.5px;margin-left:6px}

.gauthor{margin-top:40px;padding:20px 22px;border:1px solid rgba(23,23,26,.12);background:#fff}
.gauthor-k{font:600 11.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.1em;color:#7E6114}
.gauthor-n{margin-top:8px;font:600 16px/1.3 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif}
.gauthor-n a{color:#17171A;text-decoration:none}
.gauthor-n a:hover{text-decoration:underline}
.gauthor p{margin:8px 0 0;font:400 14px/1.65 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#3A3A40}
.gauthor p a{color:#17171A}

/* ---- print · the reference copy ------------------------------------------
   Everything that is about the website disappears; everything that is about
   the guide stays, with the address and dates on the first page so a PDF found
   a year later still says where it came from and how old it is. */
@media print{
  .kh,.kh-o,.kepla-progress,.blog-side,.ctabox,.related,.gkeep,.kf,.gshare,.atoc,.kskip,.ganchor,.tbox{display:none!important}
  .gprint{display:block;margin:0 0 18px;padding:0 0 10px;border-bottom:1px solid #999;font:400 11px/1.5 Georgia,serif;color:#333}
  html,body{background:#fff!important;color:#000!important}
  .main,.wrap{max-width:none!important;padding:0!important;margin:0!important}
  h1{font-size:26pt;margin-top:0}
  a{color:#000!important;text-decoration:underline}
  .gsources a[href^="http"]:after,p a[href^="http"]:after,li a[href^="http"]:after{content:" (" attr(href) ")";font-size:.82em;color:#444}
  .gauthor{border:1px solid #999;background:#fff;break-inside:avoid}
  h2,h3{break-after:avoid}
  table,figure,.tablewrap,.faq,.gauthor{break-inside:avoid}
  .ahero img{max-height:70mm;width:auto}
}

/* ---- the reference look ----------------------------------------------------
   Loaded after each guide's own styles, so these win on equal specificity and
   the whole pass reverts by deleting this block. Light page kept. What changes
   is what read as "blog": rounded corners the product no longer uses, a strip
   crop that cut tall photographs, a magazine drop cap, links with no
   underline, a glowing call to action. Reference material is plainer. */

/* square, like the product · chrome (nav, sidebar) is left alone on purpose */
.ahero,.atoc,.tablewrap,.related a,.ctabox,.card,.cta,.badge{border-radius:0}
.cta{box-shadow:none}

/* the photograph as shot · 3:2 is the frame photographers work in, and the
   category tag goes: the breadcrumb two lines above already says it */
.ahero{aspect-ratio:3/2}
.ahero figcaption{display:none}

/* no drop cap */
.lede::first-letter{font:inherit;float:none;margin:0;color:inherit}

/* links in running text are underlined, a little below the baseline, in a
   quieter ink than the text · navigation, cards and buttons stay clean */
/* :where() keeps this at (0,1,1) so the plain resets below can beat it */
.wrap :where(p,li,td,dd,blockquote) a:where(:not(.cta)){
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;
  text-decoration-color:rgba(23,23,26,.38)}
.wrap :where(p,li,td) a:where(:not(.cta)):hover{text-decoration-color:#17171A}
.atoc a,.related a,.crumbs a,.byline a,.gauthor-n a,.gshare a,.blog-side a{text-decoration:none}

/* figures line up in columns */
table,.tablewrap{font-variant-numeric:tabular-nums}

/* the founding note at the end · a bordered block, not a glow */
.ctabox{background:#fff;border:1px solid rgba(23,23,26,.14)}

/* the inline transfer box · sits under the lede on the send-and-deliver guides,
   so the reader holding a folder of photos gets the answer before the essay */
.tbox{margin:26px 0 6px;padding:20px 22px 22px;border:1px solid #E0CE9C;background:linear-gradient(180deg,rgba(232,192,106,.16),rgba(232,192,106,.04));display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:22px;row-gap:4px;align-items:center;font-family:inherit}
.tbox-k{grid-column:1/-1;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:#7E6114;margin-bottom:6px}
.tbox-h{font-size:19px;font-weight:600;letter-spacing:-.012em;line-height:1.25;color:#17171A}
.tbox-p{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:#5C5C64}
.tbox-a{grid-column:2;grid-row:2/4;display:inline-flex;align-items:center;gap:8px;background:#17171A;color:#fff;padding:13px 20px;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:0 10px 24px rgba(23,23,26,.22);transition:transform .2s}
.tbox-a:hover{transform:translateY(-2px);color:#fff}
.tbox-a span{transition:transform .2s}
.tbox-a:hover span{transform:translateX(3px)}
@media (max-width:600px){.tbox{grid-template-columns:1fr;padding:18px 18px 20px}.tbox-a{grid-column:1;grid-row:auto;justify-content:center;margin-top:12px}}

/* ============================================================================
   v2 · the reading layout
   What the big guide sites share, brought here without changing the writing:
   a wider, darker reading column; the table of contents in a rail that follows
   the reader and lights the section they are in; the first answers up top;
   one quiet row to keep or pass the guide on, and the same row waiting at the
   bottom of a phone screen; a way to save a guide and get it in your inbox.
   Everything below is additive and reverts by deleting this block.
   ========================================================================== */

/* ---- the column ---- */
.gwrap{max-width:768px}
.gwrap p,.gwrap li{font-size:17.5px;line-height:1.72;color:#2A2A30}
.gwrap li{margin-top:9px}
.gwrap .lede{font-size:20px;line-height:1.55;color:#3A3A40;margin-top:22px}
.gwrap h1{font-size:44px;line-height:1.08;margin-top:26px}
.gwrap h2{font-size:29px;margin-top:58px}
.gwrap h3{font-size:19px}
.gwrap .label{margin-top:64px}
.gwrap strong{color:#17171A}
.gwrap th,.gwrap td{font-size:14.5px}
.gwrap .faq p{font-size:16.5px}
.gwrap .crumbs{margin-top:30px}
.gwrap h2[id]{scroll-margin-top:96px}
@media (max-width:700px){
  .gwrap h1{font-size:32px}
  .gwrap h2{font-size:24px}
  .gwrap p,.gwrap li{font-size:17px;line-height:1.68}
  .gwrap .lede{font-size:18.5px}
}

/* ---- byline with a face ---- */
.gby{display:flex;align-items:center;gap:13px;margin-top:22px;padding:14px 0;border-top:1px solid #EDEBE4;border-bottom:1px solid #EDEBE4;font-size:13.5px}
.gby-av{flex:none;width:42px;height:42px;border-radius:50%;background:#17171A;color:#F4F4F2;display:grid;place-items:center;font:600 13px/1 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.04em;overflow:hidden}
.gby-av img{width:100%;height:100%;object-fit:cover;display:block}
.gby-t{flex:1 1 auto;min-width:0;line-height:1.4}
.gby-t b{display:block;font-size:14.5px}
.gby-t b a{color:#17171A;text-decoration:none}
.gby-t b a:hover{text-decoration:underline}
.gby-r{display:block;color:#5C5C64;font-size:13px}
.gby-d{flex:none;text-align:right;color:#5C5C64;line-height:1.5;font-size:13px}
.gby-d span{display:block;white-space:nowrap}
.gby-d .gby-up{color:#17171A;font-weight:500}
@media (max-width:480px){.gby{flex-wrap:wrap}.gby-d{flex:1 0 100%;text-align:left;display:flex;gap:10px;padding-left:55px;margin-top:-6px}}

/* ---- keep or share · one quiet row of icons ---- */
.gtop{margin-top:12px;gap:6px;align-items:center}
.gtop button,.gshare-end button{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border:1px solid rgba(23,23,26,.16);background:#fff;color:#17171A;font-size:13px;font-weight:500;line-height:1}
.gtop button:hover,.gshare-end button:hover{border-color:#17171A;background:#fff}
.gtop button svg,.gshare-end button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gtop button.gs-ic,.gshare-end button.gs-ic{width:36px;padding:0;justify-content:center}
.gtop button.gs-save.on,.gshare-end button.gs-save.on{background:#17171A;color:#fff;border-color:#17171A}
.gtop button.gs-save.on svg{fill:currentColor}
.gtop button[data-gshare="more"],.gshare-end button[data-gshare="more"]{border-color:transparent;color:#5C5C64;padding:0 8px}
.gtop .gshare-more,.gshare-end .gshare-more{gap:6px;margin-top:4px}
.gshare-end{margin-top:22px;padding-top:18px;border-top:1px solid #EDEBE4}
.gshare-end .gs-k{flex:1 0 100%;font-size:13px;color:#5C5C64;margin-bottom:6px}

/* ---- the first answers, up top ---- */
.gquick{margin:28px 0 0;padding:20px 22px 18px;background:#fff;border:1px solid #E5E3DD;border-left:3px solid #E8C06A}
.gquick-h{font:600 11.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.1em;color:#7E6114}
.gquick dl{margin:10px 0 0}
.gquick dl>div{padding:11px 0;border-top:1px solid #F0EEE7}
.gquick dl>div:first-child{border-top:0;padding-top:4px}
.gquick dt{font-size:15.5px;font-weight:600;color:#17171A;line-height:1.4}
.gquick dd{margin:5px 0 0;font-size:15.5px;line-height:1.55;color:#3A3A40}
.gquick dd a{color:#7E6114}
.gquick .gquick-all{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:500;color:#5C5C64;text-decoration:none}
.gquick .gquick-all:hover{color:#17171A}

/* in-flow table of contents · collapsible on a phone, gone where the rail shows */
.gwrap .atoc{margin-top:22px;padding:14px 20px 16px}
.gwrap .atoc ol{columns:1}
.gwrap .atoc li{font-size:15px;margin-top:7px}
@media (min-width:1240px){.gwrap .atoc{display:none}}

/* ---- the rail: the table of contents that follows you ---- */
.grail{display:none;position:fixed;top:96px;left:max(20px,calc(50vw - 610px));width:212px;z-index:10;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:none}
.grail::-webkit-scrollbar{display:none}
@media (min-width:1240px){.grail{display:block}}
.grail .gr-h{font:600 10.5px 'Geist Mono',monospace;letter-spacing:.14em;color:#6A6A70;margin:0 0 8px;padding-left:12px}
.grail ol{list-style:none;margin:0;padding:0}
.grail li{margin:0}
.grail ol a{display:block;padding:6px 12px 6px 11px;border-left:2px solid #EDEBE4;font:400 13.5px/1.4 -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5C5C64;text-decoration:none;transition:color .12s,border-color .12s}
.grail ol a:hover{color:#17171A}
.grail ol a.on{color:#17171A;font-weight:600;border-left-color:#17171A}
.grail .gr-b{margin-top:22px;padding-top:16px;border-top:1px solid #EDEBE4}
.grail .gr-b a{display:block;padding:5px 12px;font:500 13px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#5C5C64;text-decoration:none}
.grail .gr-b a:hover{color:#17171A}
.grail .gr-b a.on{color:#7E6114;font-weight:600}
#blog-side{display:none!important}

/* ---- the right rail: keep this guide ---- */
.gside{display:none;position:fixed;top:96px;right:max(20px,calc(50vw - 610px));width:212px;z-index:10}
@media (min-width:1440px){.gside{display:block}}
.gside .gk{border:1px solid #E5E3DD;background:#fff;padding:16px 16px 14px}
.gside .gk-h{font:600 10.5px 'Geist Mono',monospace;letter-spacing:.14em;color:#6A6A70;margin-bottom:10px}
.gside .gk button{display:flex;align-items:center;gap:9px;width:100%;height:34px;padding:0 8px;margin:0;border:0;background:transparent;color:#17171A;font:500 13.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;text-align:left;cursor:pointer}
.gside .gk button:hover{background:#F4F3EF}
.gside .gk button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.gside .gk button.gs-save.on svg{fill:currentColor}
.gside .gk button[data-done]{color:#7E6114}
.gside .gk-n{margin-top:12px;padding-top:12px;border-top:1px solid #EDEBE4}
.gside .gk-n p{margin:0 0 8px;font-size:12.5px;line-height:1.5;color:#5C5C64}

/* ---- the email box · mid guide and in the rail ---- */
.gmail{display:flex;gap:6px}
.gmail input{flex:1 1 auto;min-width:0;height:38px;padding:0 11px;border:1px solid rgba(23,23,26,.22);background:#fff;font:400 14px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:#17171A;border-radius:0}
.gmail input:focus{outline:2px solid #7E6114;outline-offset:1px;border-color:#17171A}
.gmail button{flex:none;height:38px;padding:0 14px;border:0;background:#17171A;color:#fff;font:600 13.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer;white-space:nowrap}
.gmail button:disabled{opacity:.6;cursor:default}
.gmail .gmail-m{flex:1 0 100%;font-size:13px;line-height:1.5;color:#5C5C64;margin-top:6px}
.gmail .gmail-m.ok{color:#1F6B2E}
.gmail .gmail-m.err{color:#9A2B2B}
.gmail{flex-wrap:wrap}
.gside .gmail{flex-direction:column}
.gside .gmail button{width:100%}
.gsub{margin:44px 0 0;padding:22px 24px;background:#fff;border:1px solid #E5E3DD;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:8px 28px;align-items:center}
.gsub-h{font-size:18px;font-weight:600;letter-spacing:-.01em;color:#17171A;line-height:1.3}
.gsub-p{margin:4px 0 0;font-size:14.5px;line-height:1.5;color:#5C5C64}
.gsub .gmail{grid-column:2;grid-row:1/3}
@media (max-width:640px){.gsub{grid-template-columns:1fr;padding:18px 18px 20px}.gsub .gmail{grid-column:1;grid-row:auto;margin-top:8px}}

/* ---- up next ---- */
.gnext{margin-top:34px}
.gnext-k{font:600 11.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.1em;color:#7E6114}
.gwrap .related{margin-top:12px;gap:8px}
.gwrap .related a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;font-size:14.5px;font-weight:500;color:#17171A;line-height:1.35}
.gwrap .related a:after{content:"→";flex:none;color:#5C5C64;transition:transform .15s}
.gwrap .related a:hover{border-color:#17171A}
.gwrap .related a:hover:after{transform:translateX(3px);color:#17171A}
.gwrap .related a.gnext-first{grid-column:1/-1;padding:18px 18px;font-size:16.5px;font-weight:600;background:#17171A;color:#fff;border-color:#17171A}
.gwrap .related a.gnext-first:after{color:#fff}
.gwrap .related a.gnext-first small{display:block;font-size:11.5px;font-weight:600;letter-spacing:.1em;color:rgba(255,255,255,.6);margin-bottom:4px}

/* ---- the phone bar · keep, share, contents ---- */
.gmbar{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;grid-template-columns:1fr 1fr 1fr;background:rgba(253,253,252,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid rgba(23,23,26,.1);padding-bottom:env(safe-area-inset-bottom);transform:translateY(105%);transition:transform .22s ease}
.gmbar.on{transform:none}
@media (max-width:900px){.gmbar{display:grid}}
.gmbar button{height:50px;border:0;background:transparent;color:#17171A;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 13.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;cursor:pointer}
.gmbar button+button{border-left:1px solid rgba(23,23,26,.08)}
.gmbar button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.gmbar button.gs-save.on svg{fill:currentColor}
@media (max-width:900px){body.gmbar-on{padding-bottom:58px}}

/* ---- the save sheet ---- */
.gsave{position:fixed;inset:0;z-index:80;background:rgba(23,23,26,.42);display:flex;align-items:flex-end;justify-content:center;padding:0}
.gsave[hidden]{display:none}
.gsave-in{width:100%;max-width:520px;background:#FAFAF8;padding:22px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -20px 60px rgba(0,0,0,.25);max-height:88vh;overflow:auto}
@media (min-width:700px){.gsave{align-items:center;padding:20px}.gsave-in{padding:26px 28px;box-shadow:0 30px 80px rgba(0,0,0,.35)}}
.gsave-h{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;letter-spacing:-.01em;color:#17171A}
.gsave-h svg{width:18px;height:18px;fill:#17171A;stroke:#17171A;stroke-width:1.8}
.gsave-x{margin-left:auto;width:32px;height:32px;border:0;background:transparent;color:#5C5C64;font-size:22px;line-height:1;cursor:pointer}
.gsave p{margin:8px 0 0;font-size:14.5px;line-height:1.55;color:#5C5C64}
.gsave .gmail{margin-top:14px}
.gsave-k{font:600 10.5px 'Geist Mono',monospace;letter-spacing:.14em;color:#6A6A70;margin:22px 0 8px}
.gsave ul{list-style:none;margin:0;padding:0}
.gsave li{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #EDEBE4;font-size:14px}
.gsave li a{flex:1 1 auto;min-width:0;color:#17171A;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gsave li a:hover{text-decoration:underline}
.gsave li button{flex:none;border:0;background:transparent;color:#5C5C64;font-size:12.5px;cursor:pointer;padding:4px 6px}
.gsave li button:hover{color:#9A2B2B}
.gsave .gsave-empty{font-size:13.5px;color:#5C5C64;padding:8px 0}

/* the section links stay, but sit left of the rail's reach */
@media print{.grail,.gside,.gmbar,.gsave,.gquick .gquick-all,.gsub,.gnext-k{display:none!important}.gquick{border:1px solid #999;break-inside:avoid}}

/* v2 fixes after the first render */
.gshare-more[hidden]{display:none!important}
.gby-t{flex:1 1 0}
@media (max-width:480px){.gby{flex-wrap:wrap}.gby-t{flex:1 1 0}.gby-d{flex:1 0 100%;text-align:left;display:flex;gap:12px;padding-left:55px;margin-top:-4px}}
@media (max-width:600px){.gtop .gs-ic,.gtop [data-gshare="pdf"]{display:none}}
.gwrap .label+h2{margin-top:12px}
.gmail input{flex:1 1 120px}
.gside .gk .gmail button{justify-content:center;height:38px;background:#17171A;color:#fff;font-weight:600;margin-top:2px}
.gside .gk .gmail button:hover{background:#000}
.gsub{grid-template-columns:minmax(0,1fr) minmax(0,330px)}
.gside .gmail input{flex:0 0 auto}
.gby-d{box-sizing:border-box;min-width:0}

/* ============================================================================
   v2.1 · quieter
   The same bones, with the decoration taken off. One accent colour, used once
   (the transfer box). Labels and rails in grey ink, not gold. Fewer boxes:
   hairlines and space do the separating. Cards become lists. Headlines lose
   a little weight and gain a little air.
   ========================================================================== */
:root{--ink:#17171A;--ink2:#3A3A40;--ink3:#6B6B72;--line:#E6E4DE;--line2:#EFEDE7;--paper:#FAFAF8}

/* type */
.gwrap h1{font-weight:600;letter-spacing:-.03em;font-size:46px;line-height:1.06;margin-top:22px}
.gwrap h2{font-weight:600;letter-spacing:-.022em;font-size:28px;margin-top:64px}
.gwrap h3{font-weight:600}
.gwrap p,.gwrap li{color:#26262B}
.gwrap .lede{color:#4A4A52;font-size:20px}
.gwrap .label{color:var(--ink3);letter-spacing:.12em;margin-top:72px;font-weight:600}
.gwrap .label+h2{margin-top:10px}
.gwrap .crumbs{color:var(--ink3)}
.gwrap .crumbs a{color:var(--ink3)}
.gwrap .crumbs a:hover{color:var(--ink)}
.gwrap :where(p,li,td,dd) a:where(:not(.cta)){color:var(--ink);text-decoration-color:rgba(23,23,26,.3)}
.gwrap strong{font-weight:600}
@media (max-width:700px){.gwrap h1{font-size:33px}.gwrap h2{font-size:24px}}

/* byline · one hairline below, nothing above */
.gby{border-top:0;border-bottom:1px solid var(--line);padding:6px 0 16px;margin-top:26px}
.gby-av{background:#EAE8E1;color:var(--ink);font-weight:600}
.gby-r{color:var(--ink3)}
.gby-d{color:var(--ink3)}
.gby-d .gby-up{color:var(--ink2);font-weight:500}

/* the keep-or-share row · ghost buttons, small */
.gtop{margin-top:14px;gap:6px}
.gtop button,.gshare-end button{height:34px;padding:0 11px;border-color:var(--line);background:transparent;color:var(--ink2);font-size:12.5px}
.gtop button:hover,.gshare-end button:hover{border-color:var(--ink);color:var(--ink);background:transparent}
.gtop button svg,.gshare-end button svg{width:14px;height:14px}
.gtop button.gs-ic,.gshare-end button.gs-ic{width:34px}
.gtop button.gs-save.on,.gshare-end button.gs-save.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.gtop button[data-gshare="more"],.gshare-end button[data-gshare="more"]{color:var(--ink3)}
.gshare-end{border-top:1px solid var(--line);margin-top:28px}
.gshare-end .gs-k{color:var(--ink3);font-size:12.5px}

/* hero · a little smaller, a little quieter */
.gwrap .ahero{margin-top:28px;background:#EFEDE7}

/* quick answers · no box, a labelled section with hairlines */
.gquick{margin:34px 0 0;padding:16px 0 4px;background:transparent;border:0;border-top:1px solid var(--line)}
.gquick-h{color:var(--ink3);letter-spacing:.12em}
.gquick dl{margin:8px 0 0}
.gquick dl>div{padding:12px 0;border-top:1px solid var(--line2)}
.gquick dl>div:first-child{border-top:0;padding-top:6px}
.gquick dt{font-size:15.5px;color:var(--ink)}
.gquick dd{font-size:15.5px;color:var(--ink2)}
.gquick .gquick-all{color:var(--ink3);font-size:13px;margin-top:6px;border-bottom:1px solid var(--line);padding-bottom:1px}
.gquick .gquick-all:hover{color:var(--ink);border-color:var(--ink)}

/* in-flow contents on narrow screens · a list, not a card */
.gwrap .atoc{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:transparent;padding:14px 0 16px;margin-top:22px}
.gwrap .atoc .atoc-h{color:var(--ink3);letter-spacing:.12em}
.gwrap .atoc ol{padding-left:18px}
.gwrap .atoc li{color:var(--ink2)}
.gwrap .atoc a{color:var(--ink2)}
.gwrap .atoc a:hover{color:var(--ink)}

/* the rail · ink, not gold */
.grail .gr-h{color:var(--ink3)}
.grail ol a{border-left-color:var(--line);color:var(--ink3);font-size:13px;padding:5px 12px 5px 12px}
.grail ol a:hover{color:var(--ink)}
.grail ol a.on{color:var(--ink);border-left-color:var(--ink)}
.grail .gr-b{border-top-color:var(--line);margin-top:20px}
.grail .gr-b a{color:var(--ink3);font-size:12.5px;font-weight:500;padding:4px 12px}
.grail .gr-b a:hover{color:var(--ink)}
.grail .gr-b a.on{color:var(--ink);font-weight:600}

/* the right rail · no card, just a labelled column */
.gside .gk{border:0;background:transparent;padding:0 0 0 16px;border-left:1px solid var(--line)}
.gside .gk-h{color:var(--ink3)}
.gside .gk button{height:32px;padding:0 6px;color:var(--ink2);font-size:13px;margin-left:-6px;width:calc(100% + 6px)}
.gside .gk button:hover{background:transparent;color:var(--ink)}
.gside .gk button svg{width:14px;height:14px}
.gside .gk-n{border-top-color:var(--line)}
.gside .gk-n p{color:var(--ink3)}
.gside .gmail input{height:36px;border-color:var(--line);background:transparent;font-size:13.5px}
.gside .gk .gmail button{height:36px;font-size:13px}

/* the email band · hairlines, not a card */
.gsub{margin-top:56px;padding:26px 0 28px;background:transparent;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gsub-h{font-size:19px;letter-spacing:-.015em}
.gsub-p{color:var(--ink3)}
.gmail input{border-color:var(--line);background:transparent;height:40px}
.gmail input:focus{outline:0;border-color:var(--ink);box-shadow:none}
.gmail button{height:40px;background:var(--ink)}
.gmail button:hover{background:#000}

/* the transfer box · the one place the accent stays */
.tbox{border-color:#E4D8B6;background:linear-gradient(180deg,rgba(232,192,106,.12),rgba(232,192,106,.03))}
.tbox-k{color:#8A6A12}

/* the closing note · left aligned, hairline, no border box */
.gwrap .ctabox{border:0;border-top:1px solid var(--line);background:transparent;padding:34px 0 0;text-align:left;margin-top:64px}
.gwrap .ctabox>div:first-child{color:var(--ink3)!important;letter-spacing:.12em!important}
.gwrap .ctabox h2{font-size:26px;margin-top:12px}
.gwrap .ctabox p{margin-left:0!important;color:var(--ink2)}
.gwrap .cta{border-radius:0;box-shadow:none;padding:13px 22px;font-size:14px}

/* the author · hairline section, with the same face */
.gwrap .gauthor{border:0;border-top:1px solid var(--line);background:transparent;padding:24px 0 0;margin-top:44px;display:grid;grid-template-columns:42px 1fr;column-gap:14px}
.gwrap .gauthor-k{grid-column:2;color:var(--ink3);letter-spacing:.12em}
.gwrap .gauthor-n{grid-column:2;margin-top:4px}
.gwrap .gauthor p{grid-column:2;color:var(--ink2)}
.gwrap .gauthor::before{content:"OC";grid-column:1;grid-row:1/4;width:42px;height:42px;border-radius:50%;background:#EAE8E1;color:var(--ink);display:grid;place-items:center;font:600 13px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.04em}

/* up next · a list of titles, not a stack of cards */
.gnext{margin-top:40px}
.gnext-k{color:var(--ink3);letter-spacing:.12em}
.gwrap .related{display:block;margin-top:6px}
.gwrap .related a,.gwrap .related a.gnext-first{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:14px 0;border:0;border-bottom:1px solid var(--line2);background:transparent;color:var(--ink);font-size:16px;font-weight:500;line-height:1.35}
.gwrap .related a.gnext-first{padding:16px 0 18px;font-size:22px;font-weight:600;letter-spacing:-.015em;border-bottom:1px solid var(--line)}
.gwrap .related a.gnext-first small{color:var(--ink3);font-size:11.5px;letter-spacing:.12em;margin-bottom:6px}
.gwrap .related a:after,.gwrap .related a.gnext-first:after{color:var(--ink3);font-weight:400}
.gwrap .related a:hover{border-color:var(--ink)}
.gwrap .related a:hover:after{color:var(--ink)}
.gwrap .related a:last-child{border-bottom:0}

/* FAQ */
.gwrap .faq{border-top-color:var(--line2);padding:22px 0 6px}
.gwrap .faq h3{font-size:18px}
.gwrap .faq p{color:var(--ink2)}

/* tables */
.gwrap .tablewrap{border-color:var(--line)}
.gwrap th{background:#F6F5F0}
.gwrap th,.gwrap td{border-bottom-color:var(--line2)}

/* phone bar · lower, lighter */
.gmbar button{height:48px;font-size:13px;color:var(--ink2)}
.gmbar button svg{width:15px;height:15px}
.gmbar button.gs-save.on{color:var(--ink)}
@media (max-width:900px){body.gmbar-on{padding-bottom:56px}}

/* the sheet */
.gsave{background:rgba(23,23,26,.5)}
.gsave-in{background:var(--paper)}
.gsave p{color:var(--ink2)}
.gsave-k{color:var(--ink3)}
.gsave li{border-top-color:var(--line2)}
.gside .gk .gmail button{margin-left:0;width:100%}
.grail{left:max(16px,calc(50vw - 632px))}
.gside{right:max(20px,calc(50vw - 640px))}
.gwrap .related a.gnext-first{align-items:center}

/* ---- the matching free tool, after the first section ---- */
.gtool{margin:40px 0 0;padding:20px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;row-gap:3px;align-items:center}
.gtool-k{grid-column:1/-1;font:600 11.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;letter-spacing:.12em;color:var(--ink3);margin-bottom:6px}
.gtool-h{font-size:19px;font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.gtool-p{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink3)}
.gtool-a{grid-column:2;grid-row:2/4;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ink);color:var(--ink);padding:11px 16px;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background .15s,color .15s}
.gtool-a:hover{background:var(--ink);color:#fff}
@media (max-width:600px){.gtool{grid-template-columns:1fr}.gtool-a{grid-column:1;grid-row:auto;justify-content:center;margin-top:12px}}

/* ---- keep the numbers: copy or download any table, copy any list of steps ---- */
.gtools{display:flex;gap:14px;justify-content:flex-end;margin-top:8px}
.gtools button{border:0;background:transparent;padding:4px 0;font:500 12.5px -apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro','Helvetica Neue',Helvetica,Arial,sans-serif;color:var(--ink3);cursor:pointer;border-bottom:1px solid transparent}
.gtools button:hover{color:var(--ink);border-bottom-color:var(--ink)}
.gtools button[data-done]{color:var(--ink)}
@media print{.gtools,.gtool{display:none!important}}