/* ---------------------------------------------------------------------------
   Bold Shift Advisory
   Palette follows the approved redesign reference: navy #101424, panel #1B2235,
   lime #DFFF78. Lime is brand only. Green, amber and red carry meaning and are
   never used decoratively.

   The checklist, the Companion, the Start Here guide and the book's cover still
   hard-code the previous lime #D8FF4F in their own files. They do not load this
   stylesheet and were out of scope here, so the site and those four are a shade
   apart until they are aligned deliberately.
--------------------------------------------------------------------------- */
:root{
  --bg:#101424;--panel:#1B2235;--navy:#0D1120;--lime:#DFFF78;--lime-dk:#C2E056;
  --text:#F3F6FB;--muted:#A3ADBC;--line:#2E3648;
  --green:#4ADE80;--amber:#FBBF24;--red:#F87171;
  --ink:#172031;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* The header is sticky, so an anchor jump would otherwise land underneath it.
   This is what keeps "See an example" on the guide landing on the heading. */
html{scroll-padding-top:72px}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p,ul{margin:0}
button,a{font:inherit;color:inherit;cursor:pointer}
a{text-decoration:none}
img{max-width:100%;height:auto}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.eyebrow.m{color:var(--muted)}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--lime);color:var(--bg);padding:10px 14px;border-radius:8px}

/* nav */
header{position:sticky;top:0;z-index:60;background:rgba(16,20,36,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:8px;padding:13px 0}
.logo{display:flex;flex-direction:column;margin-right:auto}
.logo b{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.logo span{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.logo i{color:var(--lime);font-style:normal}
.navlinks{display:none;gap:4px;align-items:center}
.navlinks a{padding:8px 12px;border-radius:8px;color:var(--muted);font-size:14px}
.navlinks a:hover{color:var(--text)}
.navlinks a.on{color:var(--lime)}
.navlinks a.btn{color:var(--bg)}
.burger{background:var(--panel);border:1px solid var(--line);border-radius:9px;width:40px;height:40px;display:grid;place-items:center}
.mobmenu{display:none;border-top:1px solid var(--line);padding:8px 0 14px}
.mobmenu.on{display:block}
.mobmenu a{display:block;width:100%;text-align:left;padding:12px 4px;color:var(--muted);font-size:15px;border-bottom:1px solid rgba(38,50,68,.5)}
.mobmenu a.on{color:var(--lime)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:13px 20px;font-size:14.5px;font-weight:600;border:1px solid var(--line);background:var(--panel);color:var(--text)}
.btn.primary{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:700}
.btn.primary:hover{background:var(--lime-dk)}
/* min-height keeps small buttons on Apple's 44pt tap-target guideline. */
.btn.sm{padding:9px 14px;font-size:13px;min-height:44px}
.btn.block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap}
:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* page furniture */
section{padding:52px 0}
section.tight{padding:34px 0}
.h1{font-size:32px;line-height:1.12;font-weight:800;letter-spacing:-.03em}
.h2{font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.lead{color:var(--muted);font-size:16px;margin-top:14px;max-width:60ch}

/* hero */
.hero{padding:44px 0 34px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;top:-160px;right:-140px;width:420px;height:420px;background:radial-gradient(circle,rgba(223,255,120,.10),transparent 70%);pointer-events:none}
.cred{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.cred span{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:7px 13px;font-size:12.5px;color:var(--muted)}
.cred span b{color:var(--text);font-weight:600}

/* two doors */
.doors{display:grid;gap:14px;margin-top:30px}
.door{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column}
.door.b2b{border-color:#33415A}
.door h3{font-size:19px;font-weight:800;letter-spacing:-.02em;margin:9px 0 8px}
.door p{color:var(--muted);font-size:14px;flex:1}
.door ul{list-style:none;padding:14px 0 18px;font-size:13.5px}
.door li{position:relative;padding-left:19px;margin-bottom:7px;color:var(--muted)}
.door li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:2px;background:var(--lime-dk)}
.claimtag{display:inline-flex;align-items:center;gap:7px;background:#152A1C;border:1px solid #25543A;color:var(--green);border-radius:99px;padding:6px 12px;font-size:11.5px;font-weight:600;align-self:flex-start}
.claimtag.alt{background:#1E2A17;border-color:#3F5220;color:var(--lime)}

/* cards / grid */
.grid{display:grid;gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px}
.course{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:19px;text-align:left;display:block;width:100%;color:var(--text)}
.course:hover{border-color:#33415A}
.course .tagline{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.course h3{font-size:17px;font-weight:700;letter-spacing:-.01em;margin:8px 0 7px}
.course p{color:var(--muted);font-size:13.5px}
.course .meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.course .meta span{font-size:11.5px;color:var(--muted);background:var(--navy);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}
.filters button{background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-size:13px;color:var(--muted)}
.filters button.on{background:var(--lime);color:var(--ink);border-color:var(--lime);font-weight:600}

/* ebook */
.book{display:grid;gap:24px}
.cover{background:linear-gradient(160deg,#141C30,#0D1322);border:1px solid var(--line);border-radius:16px;padding:34px 26px;text-align:center}
.cover .k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--lime);text-transform:uppercase}
.cover h3{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:14px 0}
.cover .rule{width:52px;height:3px;background:var(--lime);margin:16px auto}
.cover p{color:var(--muted);font-size:13.5px}
.cover .stamp{margin-top:20px;font-size:14px;font-weight:800}
.cover .stamp i{color:var(--lime);font-style:normal}
.price{display:flex;align-items:baseline;gap:11px;margin:6px 0 16px}
.price b{font-size:36px;font-weight:800;letter-spacing:-.03em}
.price s{color:var(--muted);font-size:17px}
.price em{font-style:normal;background:#3A2E12;color:var(--amber);border-radius:6px;padding:4px 9px;font-size:11.5px;font-weight:700}
.incl{list-style:none;padding:0;margin:16px 0}
.incl li{position:relative;padding-left:26px;margin-bottom:10px;font-size:14px}
.incl li::before{content:"\2713";position:absolute;left:0;top:-1px;color:var(--lime);font-weight:700}
.incl li small{display:block;color:var(--muted);font-size:12.5px}
.trust{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11.5px;color:var(--muted)}

/* definition lists / toc */
.toc{list-style:none;padding:0}
.toc li{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid rgba(38,50,68,.6);font-size:14px}
.toc li b{font-family:var(--mono);font-size:11px;color:var(--muted);flex:none;width:70px;padding-top:2px}

/* checkout modal */
.modal{position:fixed;inset:0;z-index:90;display:none}
.modal.on{display:block}
.mbg{position:absolute;inset:0;background:rgba(4,7,14,.78)}
.mpanel{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow-y:auto;background:var(--bg);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:22px 20px 30px}
.mpanel h3{font-size:20px;font-weight:800;letter-spacing:-.02em}
label.f{display:block;margin:14px 0}
label.f span{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
/* 16px is not a style choice. iOS Safari zooms the whole page when you focus
   an input smaller than this, and the visitor then has to pinch back out.
   It happens on the checkout form, at the exact moment someone is paying. */
label.f input,label.f textarea{width:100%;background:var(--navy);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px;font-family:inherit;font-size:16px}
label.f input:focus,label.f textarea:focus{outline:none;border-color:var(--lime)}
label.f small{display:block;color:var(--muted);font-size:12px;margin-top:6px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.summary{background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:14px;margin:16px 0}
.summary div{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px;color:var(--muted)}
.summary div.tot{margin:10px 0 0;padding-top:11px;border-top:1px solid var(--line);color:var(--text);font-weight:700;font-size:16px}
.gateway{display:flex;align-items:center;gap:11px;background:var(--navy);border:1px solid var(--line);border-radius:12px;padding:13px}
.gateway .gi{width:38px;height:38px;border-radius:9px;background:var(--lime);color:#0B1020;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.gateway b{display:block;font-size:13.5px}
.gateway small{color:var(--muted);font-size:11.5px}

/* notices */
.note{background:var(--navy);border-left:3px solid var(--lime);border-radius:0 10px 10px 0;padding:14px 15px;font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:20px}
.note b{color:var(--text)}
.note.good{border-left-color:var(--green)}
.note.warn{border-left-color:var(--amber)}
.note.bad{border-left-color:var(--red)}
.quote{border-left:3px solid var(--lime);padding:4px 0 4px 16px;font-size:17px;line-height:1.5;margin:20px 0;color:var(--text)}

/* footer */
footer{border-top:1px solid var(--line);padding:34px 0;margin-top:20px;color:var(--muted);font-size:13px}
.fgrid{display:grid;gap:22px;margin-bottom:24px}
.fgrid h4,.fgrid h3{font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--text);margin-bottom:10px}
/* Footer links are standalone navigation, not inline prose, so they get a
   real tap target rather than the 19px they had. */
.fgrid a{display:block;padding:10px 0;color:var(--muted);min-height:44px}
.fgrid a:hover{color:var(--lime)}
.legal{border-top:1px solid var(--line);padding-top:18px;font-size:11.5px;line-height:1.6}

@media(min-width:760px){
  .navlinks{display:flex}
  .burger{display:none}
  .h1{font-size:44px}
  .h2{font-size:30px}
  .hero{padding:64px 0 48px}
  .doors{grid-template-columns:1fr 1fr}
  .grid.g2{grid-template-columns:1fr 1fr}
  .grid.g3{grid-template-columns:repeat(3,1fr)}
  .book{grid-template-columns:0.85fr 1.15fr;align-items:start}
  .fgrid{grid-template-columns:2fr 1fr 1fr 1fr}
  .mpanel{top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(520px,92vw);border-radius:18px;border:1px solid var(--line)}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}

/* ---------------------------------------------------------------------------
   REDESIGN — additive layer
   Everything above this line is untouched, so the checkout, the legal pages
   and the masterclass keep rendering exactly as they did.

   The one structural idea the old site did not have: alternating dark and
   "paper" sections. Paper is a light band on the same page, not a light theme,
   so contrast is set per band rather than per element.

   The approved reference uses navy #101424 / lime #dfff78. The tokens below
   stay on the site's existing navy and lime because the checklist, the
   Companion, the Start Here guide and the book cover hard-code those values
   and are out of scope to rebuild. Swapping the two values on the
   "reference direction" line is the whole change, if the exact reference
   hexes are wanted instead.
--------------------------------------------------------------------------- */
:root{
  --paper:#F5F3EB;
  --paper-line:#DCDFD4;
  --paper-line-2:#B9BFB2;
  --paper-muted:#58616F;
  --paper-eyebrow:#5F6A3D;
}

/* Bands ------------------------------------------------------------------- */
/* The second line of a page headline carries the accent. It is the reference's
   signature move and the only place lime appears in running type. */
.h1 em,.pageintro h1 em{font-style:normal;color:var(--lime)}
.paper{background:var(--paper);color:var(--ink)}
.paper .eyebrow{color:var(--paper-eyebrow)}
.paper .eyebrow.m{color:var(--paper-muted)}
.paper p,.paper li,.paper .lead{color:var(--paper-muted)}
.paper h1,.paper h2,.paper h3,.paper h4,.paper strong,.paper b{color:var(--ink)}
.paper .btn{background:transparent;color:var(--ink);border-color:var(--paper-line-2)}
.paper .btn:hover{border-color:var(--ink)}
.paper .btn.primary{background:var(--lime);color:var(--ink);border-color:var(--lime)}
.paper .btn.primary:hover{background:var(--lime-dk)}
.paper a{color:var(--ink)}
.panelband{background:var(--panel)}

/* A credential strip, not a claim strip. Everything in it is verifiable. */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;font-size:12.5px;color:var(--muted)}
.band .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* Sub-navigation ---------------------------------------------------------- */
.subnav{background:#181E30;border-bottom:1px solid var(--line)}
/* The strip scrolls sideways on a phone rather than wrapping to two rows,
   because two rows here would push the guide's buy button off the first
   screen. The fade is the only thing telling you there is more to the right. */
.subnav .wrap{display:flex;align-items:center;gap:18px;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 86%,transparent);mask-image:linear-gradient(to right,#000 86%,transparent)}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav b{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:400;flex:none}
.subnav a{white-space:nowrap;font-size:13px;color:var(--muted);padding:12px 0;border-bottom:2px solid transparent;flex:none;min-height:44px;display:flex;align-items:center}
.subnav a:hover{color:var(--text)}
.subnav a.on{color:var(--lime);border-bottom-color:var(--lime)}

/* Layout primitives ------------------------------------------------------- */
.tiles,.duo,.split,.feature{display:grid;gap:16px}
.pageintro{padding:40px 0 26px}
.pageintro .lead{margin-top:16px}

.tile{background:#fff;border:1px solid var(--paper-line);border-radius:12px;padding:24px;display:flex;flex-direction:column;align-items:flex-start}
.tile h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.2;margin-bottom:10px;color:var(--ink)}
.tile p{font-size:13.5px;color:var(--paper-muted);margin-bottom:18px}
.tile .btn{margin-top:auto}
.label{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-eyebrow);font-weight:700;margin-bottom:16px}

.callout{background:#EAEDDF;border-left:3px solid var(--lime-dk);padding:22px;margin-top:26px;color:var(--ink);border-radius:0 10px 10px 0}
.callout h3{font-size:17px;font-weight:800;margin-bottom:6px}
.callout p{font-size:14px;color:var(--paper-muted);margin:0 0 14px}

.pov{display:flex;gap:15px;border-top:1px solid #3A4257;padding-top:16px;margin-top:16px}
.pov>span{font-family:var(--mono);font-size:11px;color:var(--lime);flex:none}
.pov strong{display:block;font-size:13.5px}
.pov small{display:block;font-size:12px;color:var(--muted);margin-top:4px}
.side{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.side .detail{font-size:14px;color:#C8D0DD}

.authorline{font-size:12.5px;color:var(--muted);border-left:2px solid var(--lime);padding-left:12px;margin-top:24px;line-height:1.6}
.textlink{display:inline-block;font-size:13px;text-decoration:underline;text-underline-offset:5px;padding:10px 0;min-height:44px;color:inherit}

/* The cover. Typography and CSS, not an image: there is no cover photograph
   and the product is a PDF. */
.bookcover{max-width:220px;min-height:280px;padding:26px 21px;background:linear-gradient(130deg,#2D3650,#151B2D);border:1px solid #4C5570;border-left:7px solid #46506A;box-shadow:12px 15px 0 #DBDFD1;transform:rotate(-3deg);display:flex;flex-direction:column;justify-content:space-between;color:var(--text);margin:8px auto 16px}
.bookcover small{font-family:var(--mono);font-size:8px;letter-spacing:.14em;color:var(--lime)}
.bookcover strong{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.07;display:block;margin:24px 0;color:var(--text)}
.bookcover .rule{width:48px;height:3px;background:var(--lime);margin-bottom:16px}
.bookcover p{font-size:10px;line-height:1.5;color:#D6DCE8;margin:0}
.bookcover b{display:block;margin-top:16px;font-size:9px;letter-spacing:.08em;color:var(--lime)}

/* An illustrative preview of a tool, never a replacement for it. */
.toolvisual{background:#EDF0E5;border:1px solid #DCE1D1;border-radius:8px;padding:16px;width:100%;margin-bottom:20px;color:#435133}
.toolvisual .checkrow{font-size:12.5px;padding:6px 0;display:flex;align-items:center;gap:9px;color:#435133}
.toolvisual .checkrow input{accent-color:#617637;width:16px;height:16px}
.pillrow{display:flex;gap:6px;flex-wrap:wrap}
.pill{background:#fff;border:1px solid #CDD6BD;border-radius:5px;padding:5px 9px;font-size:10.5px}

/* Forms that sit on paper. 16px inputs, because iOS zooms below that. */
.pform{background:#fff;border:1px solid var(--paper-line);border-radius:12px;padding:24px;color:var(--ink)}
.pform h3{font-size:18px;font-weight:800;margin-bottom:16px}
.pform label{display:block;font-size:12.5px;font-weight:700;margin-bottom:15px;color:var(--ink)}
.pform input,.pform select,.pform textarea{display:block;width:100%;background:#F7F8F4;color:var(--ink);border:1px solid #CCD2C8;border-radius:7px;padding:12px;margin-top:6px;font-family:inherit;font-size:16px;font-weight:400}
.pform textarea{min-height:110px;resize:vertical}
.pform input:focus,.pform select:focus,.pform textarea:focus{outline:none;border-color:var(--lime-dk)}
.pform small{display:block;font-size:11.5px;color:#65705E;margin-top:12px}
.pform .btn.primary{width:100%}
.demo{background:#F1F0E4;border-left:3px solid var(--amber);padding:11px 13px;border-radius:0 8px 8px 0;font-size:12px;color:#6B5B27;margin-bottom:16px;line-height:1.5}
.formstatus{font-size:12.5px;color:#4B5C37}
.formstatus:not(:empty){margin-top:14px}
.previewmark{color:#8E7F45}

/* Expandable content. Native details, so it works with JS blocked. */
.faq details{border-bottom:1px solid #D5D8CF;padding:16px 0}
.faq summary{font-size:14.5px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:18px;color:var(--ink);min-height:28px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;font-weight:400;line-height:1;color:var(--paper-muted)}
.faq details[open] summary::after{content:'\2212'}
.faq details p{font-size:13.5px;color:var(--paper-muted);max-width:72ch;margin-top:12px}
.faq details .textlink{color:var(--ink)}

/* ---------------------------------------------------------------------------
   /interviewprepared
   Scoped to g- so nothing here can reach the checkout, the legal pages or the
   tools. Section order is the approved one and is load bearing: hero, example,
   what you get, sound familiar, method, author, FAQ, final purchase.
--------------------------------------------------------------------------- */
.g-hero{display:grid;gap:28px;padding:26px 0 32px}
.g-hero h1{font-size:35px;line-height:1.09;letter-spacing:-.035em;font-weight:800}
.g-hero h1 span{color:var(--lime)}
.g-lead{font-size:15px;line-height:1.65;color:#D2D5DE;margin-top:16px;max-width:52ch}
.g-byline{font-size:12px;color:var(--muted);border-left:2px solid var(--lime);padding-left:12px;margin-top:18px;line-height:1.55}
.g-byline strong{display:block;color:var(--text);font-size:13px}
.g-spec{font-size:11.5px;color:#D8DCE4;margin-top:16px}
.g-buyrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px}
.g-buyrow .btn.primary{width:100%;min-height:50px;font-size:15px}
.g-samplelink{font-size:12.5px;text-decoration:underline;text-underline-offset:5px;color:var(--muted);margin:0 auto;padding:8px;min-height:44px;display:inline-flex;align-items:center}
.g-reassure{font-size:11.5px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.6}

/* Mobile first, and this is the mobile treatment the reference asks for: the
   cover is a small supporting illustration BELOW the sales copy and the buy
   button, never a full-screen cover above the headline. */
.g-product{display:flex;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:24px}
.g-cover{width:128px;min-width:128px;min-height:174px;padding:14px 12px;background:linear-gradient(120deg,#242C43,#151A2B 64%);border:1px solid #42485C;border-left:4px solid #333C51;box-shadow:10px 12px 26px #0006;transform:rotate(-3deg);display:flex;flex-direction:column;justify-content:space-between}
.g-cover .h{font-family:var(--mono);font-size:6px;letter-spacing:.08em;color:var(--lime)}
.g-cover .t{font-size:20px;font-weight:800;letter-spacing:-.035em;line-height:1.03;margin:12px 0}
.g-cover .rule{height:2px;width:26px;background:var(--lime);margin-bottom:8px}
.g-cover .s{font-size:7px;line-height:1.4;color:#D6DAE4}
.g-cover .f{font-size:6px;letter-spacing:.04em;color:var(--lime);margin-top:12px}
.g-booknote{font-size:13px;color:var(--muted);max-width:180px;line-height:1.5}

.g-intro{max-width:650px;font-size:14px;color:var(--paper-muted);margin-top:12px}
.g-compare{display:grid;gap:16px;margin-top:24px}
.g-answer{padding:22px;border:1px solid #D8DAD2;border-radius:10px;background:#fff}
.g-answer blockquote{margin:0;font-size:15.5px;line-height:1.65;color:var(--ink)}
.g-answer.good{border-top:3px solid #9CAB49}
.g-answer-label{font-family:var(--mono);font-size:10px;letter-spacing:.11em;font-weight:700;text-transform:uppercase;color:#5B6170;margin-bottom:14px}
.g-interp{border-top:1px solid #E0E3D6;padding-top:14px;margin-top:18px;font-size:12.5px;color:#4A5640}
.g-notesm{font-size:11.5px;color:#626872;margin-top:12px}

.g-kit{display:grid;gap:22px;margin-top:26px}
.g-excerpt{background:#fff;color:#202C3D;border:1px solid #DFE1DA;border-radius:4px;padding:24px;box-shadow:0 8px 25px #2832270a;max-width:370px;margin:0 auto}
.g-excerpt .top{font-family:var(--mono);font-size:9px;color:#7E8895;letter-spacing:.1em;border-bottom:3px solid #D6ED89;padding-bottom:10px;margin-bottom:22px}
.g-excerpt h3{font-size:18px;line-height:1.2;text-transform:uppercase;font-weight:800;color:#202C3D}
.g-excerpt p{font-size:12px;line-height:1.65;margin:12px 0;color:#202C3D}
.g-excerpt strong{font-size:12px;color:#202C3D}
.g-excerpt .method{font-size:16px;font-weight:800;line-height:1.35;margin:22px 0 6px;color:#202C3D}
.g-excerpt .cap{font-size:10px;color:#747C87;margin-top:20px}
.g-kit-item{padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #D7DACF}
.g-kit-item h3{font-size:16px;font-weight:800;margin-bottom:6px;color:var(--ink)}
.g-kit-item p{font-size:13px;color:var(--paper-muted);margin:0}
.g-freetag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;background:#E8ECD9;color:#4B5932;border-radius:3px;padding:2px 6px;margin-left:5px;vertical-align:middle}
.g-tools{font-size:12.5px;color:#4B5643;margin-top:16px}
.g-tools a{text-decoration:underline;text-underline-offset:4px}

.g-fit{display:grid;gap:22px}
.g-fit p{font-size:14px;color:var(--muted);margin-top:12px}
.g-list{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.g-list li{font-size:14px;padding-left:25px;position:relative;color:#DCE0E7}
.g-list li::before{content:'\2713';position:absolute;left:0;color:var(--lime)}

.g-steps{display:grid;gap:24px;margin-top:26px}
.g-stepnum{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--lime);margin-bottom:6px}
.g-steps h3{font-size:17px;font-weight:800;margin-bottom:8px}
.g-steps p{font-size:13px;color:var(--muted)}

.g-author{display:grid;gap:24px}
.g-author p{font-size:14px;color:#D0D5DF;margin-bottom:14px}
.g-signature{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-size:27px;margin-top:20px}
.g-handle{font-size:11.5px;color:var(--lime)}
.g-authorlabel{font-size:12.5px;color:var(--muted);margin-top:12px;line-height:1.6}

.g-final{text-align:center}
.g-final h2{font-size:32px}
.g-final h2 span{color:var(--lime)}
.g-final p{font-size:14px;color:var(--muted);max-width:46ch;margin:0 auto 22px}
.g-final .btn.primary{width:100%;min-height:50px;font-size:15px}

@media(min-width:760px){
  .tiles{grid-template-columns:repeat(3,1fr)}
  .duo{grid-template-columns:1fr 1fr;gap:22px}
  .split{grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .feature{grid-template-columns:.65fr 1.35fr;gap:40px;align-items:center}
  .pageintro{padding:52px 0 32px}
  .subnav .wrap{gap:24px;-webkit-mask-image:none;mask-image:none}
  .bookcover{max-width:230px}

  .g-hero{grid-template-columns:1.25fr .8fr;gap:45px;align-items:center;padding:52px 0 46px}
  .g-hero h1{font-size:47px;letter-spacing:-.038em}
  .g-lead{font-size:16px;margin-top:18px}
  .g-buyrow .btn.primary{width:auto;padding-left:26px;padding-right:26px}
  .g-samplelink{margin:0}
  .g-reassure{text-align:left}
  .g-product{display:block;border-top:0;padding-top:0;max-width:310px;margin:0 auto}
  .g-cover{width:auto;min-width:0;min-height:366px;padding:30px 26px;border-left-width:7px;transform:rotate(3deg);box-shadow:14px 17px 35px #0006}
  .g-cover .h{font-size:9px;letter-spacing:.16em}
  .g-cover .t{font-size:34px;letter-spacing:-.045em;margin:24px 0}
  .g-cover .rule{width:48px;height:3px;margin-bottom:18px}
  .g-cover .s{font-size:12px;line-height:1.55}
  .g-cover .f{font-size:10px;letter-spacing:.1em;margin-top:24px}
  .g-booknote{font-size:11.5px;text-align:center;max-width:none;margin-top:24px}
  .g-compare{grid-template-columns:.7fr 1.3fr;gap:18px}
  .g-kit{grid-template-columns:1fr 1fr;gap:30px;align-items:center}
  .g-fit{grid-template-columns:1fr 1fr;gap:40px}
  .g-steps{grid-template-columns:repeat(3,1fr);gap:28px}
  .g-author{grid-template-columns:.7fr 1.3fr;gap:38px}
  .g-final h2{font-size:36px}
  .g-final .btn.primary{width:auto;padding-left:30px;padding-right:30px}
}

/* ---------------------------------------------------------------------------
   /resume-review and /admin/resume
   Scoped to rr- and ad- so nothing here reaches the guide, the checkout or
   the legal pages. Built from the existing tokens: navy and lime for the
   selling page, paper for forms, the same 16px inputs everywhere.
--------------------------------------------------------------------------- */
@media(min-width:760px){.tiles.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.tiles.four{grid-template-columns:repeat(4,1fr)}}

.rr-hero{display:grid;gap:28px;padding:30px 0 34px}
.rr-hero h1{font-size:34px;line-height:1.1;letter-spacing:-.035em;font-weight:800}
.rr-hero h1 em{font-style:normal;color:var(--lime)}
.rr-lead{font-size:15.5px;line-height:1.65;color:#D2D5DE;margin-top:16px;max-width:52ch}
.rr-cta{margin-top:22px}
.rr-cta .btn.primary{width:100%;min-height:50px;font-size:15px}
.rr-email{font-size:13px;color:var(--muted);margin-top:12px}
.rr-person{display:flex;gap:12px;align-items:center;margin-top:22px}
.rr-mono{display:grid;place-items:center;width:42px;height:42px;border:1px solid #657347;border-radius:50%;font:14px Georgia,serif;color:var(--lime);flex:none}
.rr-person strong{display:block;font-size:13.5px}
.rr-person span{font-size:12px;color:var(--muted)}
.rr-paused{background:var(--navy);border-left:3px solid var(--amber);border-radius:0 10px 10px 0;padding:13px 15px;font-size:14px;color:var(--text);margin-top:22px}
.rr-package{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:24px}
.rr-package h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin-top:10px}
.rr-price{display:flex;align-items:baseline;gap:10px;margin:12px 0 4px}
.rr-price b{font-size:40px;font-weight:800;letter-spacing:-.03em}
.rr-price span{font-size:12.5px;color:var(--muted)}
.rr-scope{font-size:12.5px;color:var(--muted);margin-top:6px}
.rr-timing{border-top:1px solid var(--line);margin-top:18px;padding-top:14px;font-size:12.5px;color:var(--muted)}
.rr-timing strong{display:block;color:var(--text);font-size:13.5px;margin-bottom:2px}
.rr-timing p+p{margin-top:10px}

.rr-example{background:#fff;border:1px solid var(--paper-line);border-radius:12px;padding:22px;margin-top:22px}
.rr-example .rr-tag{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;background:#F1F0E4;color:#6B5B27;border-radius:4px;padding:4px 8px;margin-bottom:16px}
.rr-cols{display:grid;gap:18px}
.rr-cols .g-answer-label{margin-bottom:8px}
.rr-cols blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}
.rr-cols .rr-mid{font-size:14px;color:var(--paper-muted)}
.rr-cols .rr-after{border-left:3px solid #9CAB49;padding-left:14px}

.rr-form{max-width:none}
.pform .rr-err{display:block;color:#9B2C22;font-size:12.5px;font-weight:600;margin-top:6px}
.pform [aria-invalid="true"]{border-color:#C0392B}
.pform .rr-check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:13.5px;line-height:1.5}
.pform .rr-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:#617637}
.pform .rr-help{font-weight:400;font-size:13.5px;line-height:1.6;color:var(--paper-muted);margin:10px 0 4px}
.pform .rr-help p{margin:0 0 10px}
.pform .rr-help strong{color:var(--ink)}
.pform textarea.rr-long{min-height:260px}
.pform .rr-count{font-weight:400;font-size:11.5px;color:#65705E;margin-top:6px}
.pform .rr-readonly{background:#EEF0EA;color:#3B4452}
.pform input[type=file]{background:#fff;padding:10px}
.rr-errors{background:#FBEDEA;border-left:3px solid #C0392B;border-radius:0 8px 8px 0;padding:12px 14px;font-size:13px;color:#7A2A20;margin-bottom:18px}
.rr-errors ul{margin:6px 0 0;padding-left:18px}
.rr-errors a{color:#7A2A20;text-decoration:underline}
.rr-facts{list-style:none;padding:0;margin:14px 0}
.rr-facts li{padding:10px 0;border-top:1px solid var(--paper-line);font-size:14px;color:var(--ink)}
.rr-status{max-width:680px}
.rr-ref{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:18px}
.paper .rr-ref{color:var(--paper-muted)}

.ad-table{width:100%;border-collapse:collapse;font-size:13.5px}
.ad-table th{text-align:left;font-weight:600;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;padding:8px 10px;border-bottom:1px solid var(--line)}
.ad-table td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
.ad-table a{color:var(--lime);text-decoration:underline;text-underline-offset:3px}
.ad-scroll{overflow-x:auto}
.ad-pill{display:inline-block;border-radius:99px;padding:3px 9px;font-size:11.5px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.ad-pill.good{color:var(--green);border-color:#25543A}
.ad-pill.warn{color:var(--amber);border-color:#6B5518}
.ad-pill.bad{color:var(--red);border-color:#6B2A2A}
.ad-answer{white-space:pre-wrap;background:var(--navy);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.ad-grid{display:grid;gap:18px}
.ad-form select,.ad-form input,.ad-form textarea{width:100%;background:var(--navy);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:11px;font-family:inherit;font-size:16px}
.ad-form label{display:block;font-size:12.5px;font-weight:600;margin:10px 0 6px}
.ad-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:13.5px}
.ad-dl dt{color:var(--muted)}
.ad-dl dd{margin:0;overflow-wrap:anywhere}

@media(min-width:760px){
  .rr-hero{grid-template-columns:1.2fr .85fr;gap:44px;align-items:start;padding:52px 0 46px}
  .rr-hero h1{font-size:48px}
  .rr-cta .btn.primary{width:auto;padding-left:26px;padding-right:26px}
  .rr-cols{grid-template-columns:1fr 1fr 1.2fr;gap:24px}
  .ad-grid{grid-template-columns:1.4fr 1fr}
}
/* The guide's step list was drawn for a dark band. On paper it needs the
   paper tokens, or the lime numbers and grey text drop below 4.5:1. */
.paper .g-stepnum{color:var(--paper-eyebrow)}
.paper .g-steps p{color:var(--paper-muted)}
@media(min-width:760px){.ad-grid.ad-grid-3{grid-template-columns:repeat(3,1fr)}}
/* The "illustrative example" tag is a truthfulness label, not decoration: it
   says the comparison is not a customer's testimonial. It reads at 11px, where
   the mono eyebrows around it can stay at 9.5px. */
.rr-example .rr-tag{font-size:11px;letter-spacing:.08em}
.rr-example .g-notesm{font-size:12.5px}
/* The intake form: four sections, and guidance that no longer stands between
 a question and its box. */
.pform .rr-section{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-eyebrow);font-weight:700;margin:30px 0 14px;padding-top:18px;border-top:1px solid var(--paper-line)}
.pform .rr-optional{font-weight:400;color:#6B7280}
.pform details.rr-guidance{border:1px solid var(--paper-line);border-radius:8px;padding:0 14px;margin-bottom:18px;background:#F7F8F4}
.pform details.rr-guidance summary{cursor:pointer;font-size:13.5px;font-weight:700;padding:13px 0;min-height:44px;display:flex;align-items:center;color:var(--ink)}
.pform details.rr-guidance[open] summary{border-bottom:1px solid var(--paper-line)}
.pform details.rr-guidance .rr-help{padding:4px 0 12px}
/* The ask at the top of the intake: every question is optional, so this is
   the only thing standing between a paid buyer and a two-line answer. */
.pform .rr-ask{background:#EAEDDF;border-left:3px solid var(--lime-dk);border-radius:0 8px 8px 0;padding:14px 16px;font-size:13.5px;line-height:1.6;color:var(--ink);margin-bottom:4px}
/* The guide that comes with every review, called out beside the price. */
.rr-included{font-size:12.5px;line-height:1.6;color:var(--text);background:#232B41;border-left:2px solid var(--lime);border-radius:0 6px 6px 0;padding:10px 12px;margin-top:12px}
.rr-included em{font-style:normal;color:var(--lime)}
/* The resume review, mentioned below the guide page purchase block. Quiet on
   purpose: it must not compete with the button above it. */
.g-alsofrom{font-size:12.5px;color:var(--muted);margin-top:18px;padding-top:16px;border-top:1px solid var(--line);line-height:1.7;max-width:46ch;margin-left:auto;margin-right:auto;text-align:center}
.g-alsofrom a{color:var(--lime);text-decoration:underline;text-underline-offset:4px;display:inline-block;min-height:44px;padding-top:10px}
/* Two ways in, on the guide hero: read it yourself, or have the resume
   edited. The guide keeps the only button; the review states its price and
   links out, so nothing competes for the same tap. */
.g-ways{display:grid;gap:10px;margin:18px 0 16px}
.g-way{border:1px solid var(--line);border-radius:12px;padding:15px 16px;background:var(--panel)}
.g-way.on{border-color:var(--lime);background:#1E2738}
.g-way .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.g-way .amt{font-size:22px;font-weight:800;letter-spacing:-.02em}
.g-way .top s{color:var(--muted);font-size:14px}
.g-way .top em{font-style:normal;background:#3A2E12;color:var(--amber);border-radius:6px;padding:3px 8px;font-size:10.5px;font-weight:700}
.g-way .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-left:auto}
.g-way p{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.6}
.g-way a{color:var(--lime);text-decoration:underline;text-underline-offset:4px;display:inline-block;min-height:44px;padding-top:12px}
@media(min-width:760px){.g-ways{grid-template-columns:1fr 1fr;align-items:stretch}.g-way{display:flex;flex-direction:column}}