/* ============================================================
   makasa.ai shared stylesheet
   Scheme:   Oxford & Sand (option 7), applied 2026-08-30.
   Headline: Plus Jakarta Sans (option 7), applied 2026-08-30.

   TO CHANGE THE COLOR SCHEME, EDIT ONLY THE :root BLOCK BELOW.
   Nothing else in this file names a color. The alternates from the
   options page are kept commented at the foot of this block, so a
   swap is one paste rather than a rebuild.
   ============================================================ */

:root{
  /* ── ink and ground ── */
  --panel:        #1E2A38;   /* dark section background          */
  --panel-deep:   #16202B;   /* nav, and the deepest panel        */
  --panel-raised: #26344504; /* unused placeholder, see --card-dk */
  --card-dk:      #26333F;   /* card on a dark panel              */
  --card-dk-line: #33424F;

  --band:         #F4F1EC;   /* warm light section background     */
  --band-2:       #EAE4DA;   /* second light band, slightly deeper*/
  --paper:        #FFFFFF;   /* card and form background          */
  --line:         #E3DED4;   /* border on light                   */

  /* ── type ── */
  --ink:          #1E2A38;   /* headings on light                 */
  --ink-body:     #55636F;   /* body copy on light                */
  --ink-soft:     #8A8579;   /* eyebrow and captions on light     */

  --on-dark:      #FFFFFF;   /* headings on dark                  */
  --on-dark-body: #C2CDD8;   /* body copy on dark                 */
  --on-dark-soft: #B3A48C;   /* eyebrow and captions on dark      */
  --on-dark-mute: #8D9AA8;   /* nav links, small print on dark    */

  /* ── accent ── */
  --accent:       #DDB076;   /* the sand. Use on dark grounds.    */
  --accent-ink:   #8A6524;   /* darker sand for text on light.    */
  --accent-on:    #1E2A38;   /* text sitting on a sand fill       */
  --accent-soft:  #F3E7D6;   /* sand tint for chips and fills     */

  /* ── shape ── */
  --r:            10px;
  --r-sm:         7px;
  --gutter:       5%;
  --measure:      1120px;

  /* ── type stacks ── */
  /* Headline face. To change it, swap this one line and the <link> in each
     page head. Alternates tried on 2026-08-30, all on Google Fonts:
       "Inter Tight" 800 · "Archivo" 800 · "Archivo Black" 400
       "Schibsted Grotesk" 900 · "Bricolage Grotesque" 800
       "Space Grotesk" 700 · "Sora" 800 · "Figtree" 900
       "Fraunces" 700 (the serif both of these replaced)
     Note: Plus Jakarta Sans tops out at 800, so the hero runs at 800 and
     the headings below it at 700. A face that reaches 900 can shift the
     whole ladder up one step. */
  --font-display: "Plus Jakarta Sans","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-sans:    "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* ────────────────────────────────────────────────────────
     ALTERNATE SCHEMES. Paste one over the values above.

     1. Ink & Teal         panel #1A1A1A  nav #1A1A1A  accent #1A7FA8
                           accent-ink #146583  band #F4F6F9  line #DDE3EA
                           on-dark-soft #A8BDD4  accent-soft #E2F0F6
     2. Graphite & Amber   panel #17181A  nav #101113  accent #E5A11B
                           accent-ink #8A5F06  band #F6F4F0  line #E4DFD6
                           on-dark-soft #C9A86A  accent-soft #FBF0D8
     3. Midnight & Cyan    panel #0F1B2D  nav #0A1422  accent #35B3D6
                           accent-ink #14657D  band #EEF3F8  line #DCE5EE
                           on-dark-soft #7FA3C4  accent-soft #DFF1F7
     4. Slate & Coral      panel #1C2230  nav #141926  accent #FF6B5A
                           accent-ink #A93728  band #F5F3F2  line #E6E1DF
                           on-dark-soft #A9A0B4  accent-soft #FFE6E2
     5. Carbon & Green     panel #14161A  nav #0D0F12  accent #3ED598
                           accent-ink #1A7551  band #F2F5F3  line #DFE6E2
                           on-dark-soft #7FAE97  accent-soft #DFF5EB
     6. Bone & Rust        panel #F2EFE8  nav #1A1917  accent #B4552D
                           accent-ink #8E3F1D  band #E4DFD4  line #DAD3C6
                           (light hero: also set --on-dark* to the ink values)
     8. Forest & Lime      panel #132018  nav #0C1610  accent #A3D45B
                           accent-ink #4F6B23  band #F1F4EE  line #DFE5D8
                           on-dark-soft #9DB08A  accent-soft #ECF5DC
     9. Paper & Deep Teal  panel #FAFAF7  nav #0E4F52  accent #0E5E63
                           accent-ink #0E5E63  band #ECEEEA  line #DCDED8
                           (light hero: also set --on-dark* to the ink values)
     ──────────────────────────────────────────────────────── */
}

/* ============================================================
   RESET AND BASE
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:inherit}
img{max-width:100%;height:auto;display:block}

:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:3px;
}

/* ============================================================
   NAV
   ============================================================ */

nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--panel-deep);
  border-bottom:1px solid rgba(221,176,118,.16);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gutter);height:66px;
}

.nav-logo{
  display:flex;align-items:center;gap:10px;
  color:var(--on-dark);font-size:21px;font-weight:400;
  letter-spacing:-.01em;text-decoration:none;flex-shrink:0;white-space:nowrap;
}
.nav-logo .mark{display:block;flex-shrink:0}
/* WORDMARK CASE TRIAL — currently showing variant B (caps, sand .ai).
   C (grey .ai) was tried and rejected on 31 Aug 2026: it was the only
   variant with no sand in the wordmark at all.
   Revert to A with:
   .wordmark{display:inline-block;font-weight:500;letter-spacing:-.015em}
   .logo-ai{color:var(--accent);font-weight:400}                          */
/* ── WORDMARK ──
   RULED 31 Aug 2026: variation 4, "bold and spaced". Inter 700 at .10em,
   dropped to 17px. MAKASA in caps, .ai in sand and lowercase.

   Why these numbers, so they don't get "tidied" later:
   · 700 balances the sand CTA pill at the other end of the nav. At 500 the
     logo loses that contest; at 600 it draws.
   · .10em is where caps stop reading as a bolded word and start reading as
     a drawn mark. .06em still reads as typing.
   · 17px, not 18 or 21, because caps carry more weight than lowercase and
     the logo must not tower over the 14.5px nav links. Do not "fix" this
     by matching it back up to the link sizes.
   · Inter, not the display face, so the logo keeps its own register. Every
     heading on the site is Plus Jakarta Sans; a PJS logo becomes a small
     headline rather than a mark.
   · No diacritic on the second A. Considered and rejected the same day:
     a diaeresis says "separate this vowel", not "say it as ah", most
     readers take it for a German umlaut (which is the vowel in "bed"),
     and the wordmark carries .ai, so it must stay typeable as a URL.

   The five alternatives are kept, rendered in the real nav, in
   ../Wordmark Variations 2026-08-31.html                                  */
.wordmark{display:inline-block;font-size:17px;font-weight:700;letter-spacing:.10em;text-transform:uppercase}
.logo-ai{color:var(--accent);font-weight:400;letter-spacing:0;text-transform:lowercase}

.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;align-items:center;gap:34px}
.nav-links a{
  color:var(--on-dark-mute);font-size:14.5px;font-weight:500;
  text-decoration:none;white-space:nowrap;
  padding:4px 0;border-bottom:1.5px solid transparent;
  transition:color .16s,border-color .16s;
}
.nav-links a:hover{color:var(--on-dark)}
.nav-links a.on{color:var(--on-dark);border-bottom-color:var(--accent)}

.nav-cta{
  background:var(--accent);color:var(--accent-on);
  font-size:14.5px;font-weight:600;padding:9px 20px;
  border-radius:var(--r-sm);text-decoration:none;white-space:nowrap;
  transition:filter .16s,transform .16s;
}
.nav-cta:hover{filter:brightness(1.07);transform:translateY(-1px)}

/* mobile nav */
.nav-toggle{
  display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px;
}
.nav-toggle span{display:block;width:22px;height:2px;background:var(--on-dark);border-radius:2px;transition:transform .2s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:880px){
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;top:66px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--panel-deep);
    border-bottom:1px solid var(--card-dk-line);
    padding:8px var(--gutter) 20px;
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links a.on{border-bottom-color:var(--accent)}
}

/* ============================================================
   SECTIONS
   ============================================================ */

section{padding:clamp(64px,8vw,104px) var(--gutter)}
.hero{background:var(--panel);padding:clamp(104px,12vw,152px) var(--gutter) clamp(72px,9vw,112px)}
.for-who{background:var(--band)}
.different{background:var(--paper)}
.proof{background:var(--panel)}
.how{background:var(--band)}
.guarantee{background:var(--panel-deep);padding:clamp(56px,6vw,80px) var(--gutter)}
.contact{background:var(--band-2)}
.inner{max-width:var(--measure);margin:0 auto}
.narrow{max-width:760px}

/* ============================================================
   TYPE
   ============================================================ */

.eyebrow{
  font-size:12.5px;font-weight:700;letter-spacing:2.6px;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:18px;
  display:flex;align-items:center;gap:12px;
}
.eyebrow::before{
  content:"";display:block;width:26px;height:2px;background:var(--accent);flex-shrink:0;
}
.hero .eyebrow,.proof .eyebrow,.guarantee .eyebrow{color:var(--on-dark-soft)}

h1{
  font-family:var(--font-display);
  font-size:clamp(36px,5.1vw,58px);
  font-weight:800;
  letter-spacing:-.032em;line-height:1.07;
  color:var(--on-dark);margin-bottom:26px;max-width:20ch;
}
h1 .accent{color:var(--accent);display:block}

h2{
  font-family:var(--font-display);
  font-size:clamp(28px,3.5vw,40px);
  font-weight:700;
  letter-spacing:-.026em;line-height:1.15;
  color:var(--ink);margin-bottom:18px;max-width:22ch;
}
.proof h2,.guarantee h2{color:var(--on-dark)}

h3{font-size:17px;font-weight:700;line-height:1.45;color:var(--ink);margin-bottom:9px;letter-spacing:-.005em}
.proof h3{color:var(--on-dark)}

h4{font-family:var(--font-sans)}

p{margin-bottom:17px;color:var(--ink-body)}
.hero p,.proof p,.guarantee p{color:var(--on-dark-body)}
.lead{font-size:18.5px;max-width:66ch;line-height:1.62}
strong{color:var(--ink);font-weight:600}
.proof strong,.hero strong{color:var(--on-dark)}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn{
  display:inline-block;padding:14px 28px;border-radius:var(--r-sm);
  font-family:var(--font-sans);font-weight:600;font-size:16px;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  transition:filter .16s,transform .16s,border-color .16s,background .16s;
}
.btn-primary{background:var(--accent);color:var(--accent-on)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--on-dark);border-color:rgba(255,255,255,.3)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent)}
.contact .btn-outline,.different .btn-outline,.for-who .btn-outline,.how .btn-outline{
  color:var(--ink);border-color:var(--line);
}
.contact .btn-outline:hover,.different .btn-outline:hover,
.for-who .btn-outline:hover,.how .btn-outline:hover{border-color:var(--accent-ink);color:var(--accent-ink)}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* ============================================================
   CARDS
   ============================================================ */

.grid{display:grid;gap:22px;margin-top:42px}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}

.card{
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);padding:30px;
  transition:transform .18s,border-color .18s,box-shadow .18s;
}
.card:hover{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 8px 26px rgba(30,42,56,.09)}
.proof .card{background:var(--card-dk);border-color:var(--card-dk-line)}
.proof .card:hover{border-color:var(--accent);box-shadow:0 8px 26px rgba(0,0,0,.3)}
.card p:last-child{margin-bottom:0}
.card .icon{font-size:26px;display:block;margin-bottom:14px}

.tag{
  font-size:11.5px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:14px;display:block;
}
.proof .tag{color:var(--accent)}
.result{color:var(--accent-ink);font-weight:600}

/* ── PAYOFF LINE ──
   The closing statement on a fork card. Not a bullet and not a services
   "result" arrow: it is the card's argument, so it takes the display face,
   more weight and size, and a hairline above to set it apart. */
.payoff{
  font-family:var(--font-display);
  font-size:19px;font-weight:700;letter-spacing:-.016em;line-height:1.35;
  color:var(--accent-ink);
  margin:0;padding-top:18px;border-top:1px solid var(--line);
}
.proof .payoff{color:var(--accent);border-top-color:var(--card-dk-line)}
.proof .result{color:var(--accent)}

/* ============================================================
   NUMBERED LIST
   ============================================================ */

.numbered{margin-top:42px}
.numbered .item{display:flex;gap:22px;margin-bottom:32px}
.numbered .item:last-child{margin-bottom:0}
.numbered .n{
  flex:0 0 42px;height:42px;border-radius:50%;
  background:var(--accent);color:var(--accent-on);
  font-family:var(--font-display);font-weight:800;font-size:18px;
  display:flex;align-items:center;justify-content:center;
}
.numbered h3{font-size:20.5px;margin-bottom:8px}

/* ── PANEL CLOSER ──
   An unnumbered statement that closes a numbered list. It is not a peer
   of the numbered items, so it carries no number and is set off by a
   hairline instead. Type matches .numbered h3 so it reads as the same
   family of thought, one step removed. */
.closer{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
.closer h3{font-size:20.5px;margin-bottom:8px}
.closer p{margin-bottom:14px}
.closer p:last-child{margin-bottom:0}
.proof .closer{border-top-color:var(--card-dk-line)}
.proof .closer h3{color:var(--on-dark)}
.cred{
  font-size:14.5px;color:var(--ink-soft);margin-bottom:0;
  padding-left:14px;border-left:2px solid var(--accent);
}
.proof .cred,.how .plinth .cred{color:var(--on-dark-soft)}
.how .plinth .cred{color:var(--ink-soft)}

/* ============================================================
   STEPS AND PATHS
   ============================================================ */

.step .n,.path .n,.how .card .n{
  font-size:11.5px;font-weight:700;letter-spacing:1.7px;text-transform:uppercase;
  color:var(--accent-ink);display:block;margin-bottom:12px;
}
.step h3{font-size:20px}
.how .card h3{font-size:22px;margin-bottom:13px;line-height:1.28;font-family:var(--font-display);font-weight:700;letter-spacing:-.022em}

/* ── the five-step flow ── */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:46px;position:relative}
.flow::before{
  content:"";position:absolute;top:20px;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg,var(--card-dk-line),var(--accent),var(--accent),var(--accent),var(--card-dk-line));
}
.flow-step{position:relative;text-align:center;padding:0 12px}
.fn{
  position:relative;z-index:2;width:42px;height:42px;border-radius:50%;
  background:var(--accent);color:var(--accent-on);
  font-family:var(--font-display);font-weight:800;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 18px;border:5px solid var(--panel);
}
.flow-step h4{font-size:15.5px;font-weight:700;color:var(--on-dark);margin-bottom:6px;line-height:1.33}
.flow-step p{font-size:14px;color:var(--on-dark-mute);margin-bottom:0;line-height:1.48}
.flow-note{margin-top:32px;color:var(--on-dark-body);font-size:17.5px}
@media(max-width:880px){
  .flow{grid-template-columns:1fr;gap:24px}
  .flow::before{top:0;bottom:0;left:21px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,var(--card-dk-line),var(--accent),var(--card-dk-line))}
  .flow-step{text-align:left;padding:0 0 0 60px}
  .fn{position:absolute;left:0;top:0;margin:0}
}

/* ── systems grid ── */
.systems{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:22px;margin-top:42px}
.systems .card{display:flex;flex-direction:column;min-height:300px}
.systems .card h3{min-height:52px;font-size:19px}
.systems .card p{margin-bottom:14px}
.systems .card .result{margin-top:auto;margin-bottom:0;padding-top:12px}
@media(max-width:940px){.systems{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.systems{grid-template-columns:1fr;grid-auto-rows:auto}}

.group-head{
  font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.025em;
  color:var(--on-dark);margin:62px 0 10px;
}
.systems.offered{margin-top:28px}
.systems.offered .card{background:#212D38;border-color:#2E3A45}

/* ── adjacent menu ── */
.menu{margin-top:46px;padding-top:38px;border-top:1px solid var(--card-dk-line)}
.menu h3{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-.024em;color:var(--on-dark);margin-bottom:12px}
.menu > p{max-width:66ch;margin-bottom:28px}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:24px 32px}
.menu-grid div{border-left:2px solid var(--accent);padding-left:16px}
.menu-grid strong{display:block;color:var(--on-dark);font-size:15.5px;margin-bottom:4px;font-weight:600}
.menu-grid span{display:block;color:var(--on-dark-mute);font-size:14.5px;line-height:1.52}

/* ── two doors, one plinth ── */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:42px;align-items:stretch}
.paths .card{display:flex;flex-direction:column}
.paths .card .result{margin-top:auto;padding-top:10px;margin-bottom:0}
.door-cta{margin-top:22px;align-self:flex-start;font-size:15px;padding:12px 24px}
.paths .card h3{
  font-family:var(--font-display);font-size:25px;font-weight:700;
  letter-spacing:-.025em;line-height:1.22;margin-bottom:14px;
}
.paths .card .n{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);
  padding:5px 11px;border-radius:100px;margin-bottom:16px;
}
.plinth{margin-top:22px;border-top:4px solid var(--accent);border-radius:0 0 var(--r) var(--r)}
.plinth:hover{transform:none}
@media(max-width:780px){.paths{grid-template-columns:1fr}}

/* ============================================================
   GUARANTEE
   ============================================================ */

.guarantee-box{
  border:2px solid var(--accent);border-radius:var(--r);
  padding:36px;max-width:860px;background:rgba(221,176,118,.05);
}

/* ============================================================
   OFFER
   ============================================================ */

.rung{max-width:860px;font-size:17.5px;margin:0}
.rung:first-of-type{margin-top:34px}
.offer{background:var(--paper);border:2px solid var(--accent);border-radius:12px;margin:26px 0;overflow:hidden}
.offer-head{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:30px 34px;border-bottom:1px solid var(--line);flex-wrap:wrap;
  background:var(--accent-soft);
}
.offer-label{font-size:11.5px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;color:var(--accent-ink);display:block;margin-bottom:7px}
.offer-head h3{font-family:var(--font-display);font-size:25px;font-weight:700;letter-spacing:-.025em;margin-bottom:0}
.offer-price{font-family:var(--font-display);font-size:48px;font-weight:800;letter-spacing:-.038em;color:var(--ink);line-height:1}
.offer-body{display:grid;grid-template-columns:1fr 1fr;gap:0}
@media(max-width:840px){.offer-body{grid-template-columns:1fr}}
.offer-half{padding:30px 34px}
.offer-half:first-child{border-right:1px solid var(--line)}
@media(max-width:840px){.offer-half:first-child{border-right:0;border-bottom:1px solid var(--line)}}
.offer-half h4{font-size:17px;font-weight:700;color:var(--ink);margin-bottom:16px}
.offer-half ul{list-style:none;margin:0}
.offer-half li{position:relative;padding-left:26px;margin-bottom:12px;font-size:15.5px;color:var(--ink-body)}
.offer-half li:last-child{margin-bottom:0}
.offer-half li::before{content:"→";position:absolute;left:0;color:var(--accent-ink);font-weight:700}
.offer-half li strong{color:var(--ink)}
.picks{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 20px}
.picks span{background:var(--accent-soft);border:1px solid var(--accent);border-radius:999px;padding:7px 15px;font-size:14px;font-weight:600;color:var(--accent-ink)}
.term{font-size:15.5px;margin-bottom:0}
.offer-foot{background:var(--band);border-top:1px solid var(--line);padding:20px 34px;margin:0;font-size:15.5px;font-weight:600;color:var(--ink)}

/* ============================================================
   WHAT CHANGES
   ============================================================ */

.changes{margin-top:42px;max-width:860px}
.chg{position:relative;padding-left:32px;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:26px}
.chg:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.chg::before{content:"";position:absolute;left:0;top:10px;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.chg h3{font-size:20px;margin-bottom:5px}
.chg p{margin-bottom:0}

/* ============================================================
   PEOPLE
   ============================================================ */

.people{display:grid;grid-template-columns:1fr;gap:22px;margin-top:42px}
.person{background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:36px}
.person h3{font-family:var(--font-display);font-size:27px;font-weight:700;letter-spacing:-.028em;margin-bottom:3px}
.person .role{font-size:11.5px;font-weight:700;letter-spacing:1.9px;text-transform:uppercase;color:var(--accent-ink);margin-bottom:20px}

/* ============================================================
   FAQ
   ============================================================ */

.faq{margin-top:42px;max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq details[open] summary{color:var(--accent-ink)}
.faq summary{
  font-size:18.5px;font-weight:600;color:var(--ink);cursor:pointer;
  list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-ink);font-weight:700;font-size:24px;flex-shrink:0;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:15px;margin-bottom:0}

/* ============================================================
   FORM
   ============================================================ */

.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:34px;max-width:640px;margin-top:42px}
.field{margin-bottom:19px}
.field label{display:block;font-size:14px;font-weight:600;color:var(--ink);margin-bottom:7px}
.field label em{font-style:normal;font-weight:400;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper);
  transition:border-color .16s,box-shadow .16s;
}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.form-note{font-size:14px;color:var(--ink-soft);margin:18px 0 0}

/* ============================================================
   PLAIN DOCUMENT PAGES
   ============================================================ */

.doc{max-width:780px}
.doc h2{font-size:27px;margin-top:44px;margin-bottom:13px;max-width:none}
.doc h2:first-of-type{margin-top:0}
.doc ul{margin:0 0 17px 22px}
.doc li{color:var(--ink-body);margin-bottom:9px}
.doc .updated{font-size:14.5px;color:var(--ink-soft);font-style:italic}
.doc a{color:var(--accent-ink);font-weight:500}

/* ============================================================
   FOOTER
   ============================================================ */

footer{
  background:var(--panel-deep);color:var(--on-dark-mute);
  padding:40px var(--gutter);font-size:14.5px;text-align:center;
  border-top:1px solid rgba(221,176,118,.16);
}
footer a{color:var(--on-dark-mute);text-decoration:none;transition:color .16s}
footer a:hover{color:var(--accent)}
footer span{margin:0 9px;opacity:.45}
.foot-line{margin-bottom:8px;color:var(--on-dark-soft);font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.014em}

.hero-guarantee{
  font-size:15.5px;color:var(--accent);margin:26px 0 0;font-weight:500;
  padding-left:14px;border-left:2px solid var(--accent);
}

.spacer{height:66px}