/* ==========================================================================
   Sadhna Astro — site styles.

   The palette block below is the same set of values as BRAND in engine/pdf.py.
   Change one, change the other: the website and the report are meant to read as
   one object, and a customer sees them within about three minutes of each other.

   Type is the same too — EB Garamond and Inter, self-hosted from /static/fonts,
   cut from the very files the PDF embeds. No CDN, so no third party learns who
   is reading a heartbreak page at 1am.
   ========================================================================== */

/* --- the shared palette. Mirrors engine/pdf.py BRAND exactly. -------------- */
:root{
  --ink:#1E1A2B;        /* BRAND.INK       body text            */
  --ink-soft:#544D63;   /* BRAND.INK_SOFT  secondary text       */
  --accent:#8A2E4D;     /* BRAND.ACCENT    headings, highlights */
  --accent-dk:#5A1E33;  /* BRAND.ACCENT_DK                      */
  --gold:#B08A47;       /* BRAND.GOLD      rules, ornaments     */
  --rule:#D8D0C4;       /* BRAND.RULE                           */
  --box:#FBF7F1;        /* BRAND.BOX_BG                         */
  --edge:#EADFCD;       /* BRAND.BOX_EDGE                       */
  --plum:#241C33;       /* BRAND.COVER_BG                       */
  --cream:#F6F1E8;      /* BRAND.COVER_INK                      */
  --paper:#FFFFFF;      /* BRAND.PAPER                          */

  /* derived — screen only, nothing in the PDF depends on these */
  --plum-deep:#160F21;
  --plum-lift:#2E2440;
  --cream-dim:#C9C0D6;
  --cream-mute:#948BA6;
  --accent-tint:#F7ECF0;
  --gold-dim:#8C6C34;

  --shadow-sm:0 1px 2px rgba(36,28,51,.06), 0 2px 8px rgba(36,28,51,.05);
  --shadow-md:0 2px 6px rgba(36,28,51,.07), 0 12px 32px rgba(36,28,51,.10);
  --shadow-lg:0 4px 12px rgba(36,28,51,.10), 0 28px 64px rgba(36,28,51,.20);

  --serif:"EB Garamond",Georgia,"Iowan Old Style",Palatino,serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --on-accent:#FFFFFF;  /* text on a filled accent button   */
  --ink-mute:#9A94A5;   /* disabled field text              */
  --danger:#B3261E;
  --accent-edge:#EBD5DD;

  --wrap:1120px;
  --radius:4px;
  --navh:79px;          /* the sticky bar as it measures: 18px padding, a 42px row, 1px rule.
                           Anchor targets and the buy panel are offset by it. */
}

/* ==========================================================================
   DARK - screen only. The PDF has no dark mode and never will: people print
   these. Light stays the palette the report is set in, so site and report keep
   matching; this is the saffron-and-gold direction to LOOK at before we commit
   the report to it.
   Structure needs no dark rules at all - body, .band, .card and .tier already
   read their colours from the tokens above, so redefining tokens is the whole
   theme. The hero and footer were dark in both to begin with.
   Three states, not two: an explicit choice stamps data-theme, the default
   "system" setting stamps nothing. So the media query and the attribute each
   need their own block, and no colour may be defined only inside one of them.
   ========================================================================== */
/* Light is the default, deliberately: the report is printed on cream paper and
   the site is meant to look like the product. Dark is opt-in through the switch
   in the nav, which stamps data-theme and remembers the choice. The OS setting is
   NOT followed - a visitor whose phone is in dark mode still lands on the light
   site, which is the one the client signed off. */
:root[data-theme="dark"]{
    --ink:#F1E8D9;        /* parchment, on near-black             */
    --ink-soft:#A99B8A;
    --accent:#E8912A;     /* saffron, where maroon sits in light  */
    --accent-dk:#F4AC55;  /* hover LIFTS on a dark ground         */
    --gold:#C9A253;
    --rule:#2C2520;
    --box:#171310;
    --edge:#2B231D;
    --plum:#080706;
    --cream:#F1E8D9;
    --paper:#100D0B;

    --plum-deep:#050404;
    --plum-lift:#1C1714;
    --cream-dim:#C4B8A6;
    --cream-mute:#8B8073;
    --accent-tint:#231708;
    --gold-dim:#A98736;

    --on-accent:#150F0A;  /* dark text on a saffron button        */
    --ink-mute:#6E6459;
    --danger:#F0806F;     /* lifted: #B3261E is unreadable here   */
    --accent-edge:#4A3016;

    --shadow-sm:0 1px 2px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.34);
    --shadow-md:0 2px 6px rgba(0,0,0,.44), 0 12px 32px rgba(0,0,0,.50);
    --shadow-lg:0 4px 12px rgba(0,0,0,.50), 0 28px 64px rgba(0,0,0,.62);
}

/* the light/dark switch in the nav */
.themer{background:transparent;border:1px solid var(--rule);border-radius:var(--radius);
  width:34px;height:34px;padding:0;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--ink-soft);flex:none}
.themer:hover{border-color:var(--gold);color:var(--gold)}
.themer svg{width:15px;height:15px;fill:currentColor;display:block}
.themer .moon{display:none}
:root[data-theme="dark"] .themer .moon{display:block}
:root[data-theme="dark"] .themer .sun{display:none}
}

/* --- the two faces the report is set in ----------------------------------- */
@font-face{font-family:"EB Garamond";src:url(/static/fonts/EBGaramond-Regular.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/static/fonts/EBGaramond-Italic.woff2) format("woff2");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/static/fonts/EBGaramond-SemiBold.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/static/fonts/Inter-Regular.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/static/fonts/Inter-SemiBold.woff2) format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* ==========================================================================
   BASE
   ========================================================================== */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;
  scroll-padding-top:calc(var(--navh) + 16px)}
/* A column, so a page shorter than the window puts the footer at the bottom of the
   screen instead of leaving a band of paper under it. */
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);
  font-size:18px;line-height:1.66;font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  display:flex;flex-direction:column;min-height:100vh}
main{flex:1 0 auto}
/* A checkout page is one screenful: when the window is taller than the form, sit the
   block between the bar and the footer instead of leaving the spare room in one lump
   at the bottom. "safe" so a window shorter than the form still starts at the top
   rather than clipping the first field. */
body.checkout main{display:flex;flex-direction:column;justify-content:safe center}
/* width:100% is load-bearing. .wrap centres itself with margin:0 auto, and auto margins
   on a flex item's cross axis switch off stretch - so the block sized to its CONTENT,
   and ticking "I do not know my birth time" added a paragraph, widened the max-content,
   and jumped the whole page from 1102px to its 1280px cap. The width of a form must not
   depend on what is in it. */
body.checkout main > *{width:100%}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dk);text-decoration:underline;text-underline-offset:3px}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 26px}
.center{text-align:center}

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.16;margin:0 0 .5em;
  letter-spacing:-.005em}
h1{font-size:clamp(34px,5.2vw,54px);letter-spacing:-.018em}
h2{font-size:clamp(27px,3.6vw,38px);color:var(--accent);letter-spacing:-.012em}
h3{font-size:20px;color:var(--accent-dk)}
p{margin:0 0 1em}

.sub{color:var(--ink-soft);font-size:19px;max-width:64ch;line-height:1.62}
.center.sub{margin-left:auto;margin-right:auto}
.tiny{font-family:var(--sans);font-size:13px;line-height:1.62;color:var(--ink-soft)}
code{font-family:ui-monospace,Menlo,monospace;font-size:.82em;background:var(--box);
  border:1px solid var(--edge);padding:2px 7px;border-radius:3px}

/* the eyebrow: letterspaced sans caps, used above every major heading */
.eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px}

/* a small gold diamond, the kundli motif, used instead of a bullet glyph */
.diamond::before{content:"";display:inline-block;width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg);margin-right:11px;vertical-align:.18em;flex:none}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--paper);padding:12px 18px;
  border:1px solid var(--accent);border-radius:var(--radius)}

/* ==========================================================================
   BUILD NOTICE — honest, and deliberately quiet. It is information, not an alarm.
   ========================================================================== */
.strip{background:var(--plum-deep);color:var(--cream-dim);font-family:var(--sans);
  font-size:12.5px;line-height:1.6;padding:10px 26px;text-align:center;
  border-bottom:1px solid rgba(176,138,71,.25)}
.strip b{color:var(--gold);font-weight:600}
.strip span{opacity:.92}

/* ==========================================================================
   NAV
   ========================================================================== */
/* Sticky, so the way back and the way to buy never scroll away. The bar itself is
   full-bleed and an inner row holds the wrap width: a centred sticky element would
   leave transparent gutters, and the dark hero would slide up through them. */
.nav{position:sticky;top:0;z-index:40;background:var(--paper)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin:0 auto;padding:18px 26px}
.brand{display:flex;align-items:center;gap:10px;font-size:22px;color:var(--ink);
  letter-spacing:.005em;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand em{font-style:italic;color:var(--accent)}
/* The brand lockup. Sized by HEIGHT - the image is 1040x419 and width:auto keeps the
   ratio, so one number controls it everywhere. It reads on both grounds: gold on cream
   and gold on near-black are both what the artwork was drawn for. */
.logo{display:block;width:auto;flex:none}
/* Sized bigger than a text wordmark would be: the swoosh and the Devanagari line take
   up more than half the image box, so "ASTRO" only reads at about 45% of the height set
   here. 52px puts the cap-height level with the nav links beside it. */
.logo-nav{height:52px}
.logo-foot{height:64px}
@media (max-width:820px){ .logo-nav{height:38px} .logo-foot{height:50px} }
.nav nav{display:flex;align-items:center;gap:28px;font-family:var(--sans);font-size:14px}
.nav nav a{color:var(--ink-soft)}
.nav nav a:not(.btn):hover{color:var(--accent)}
.nav nav a.btn{color:var(--on-accent)}
header.nav{border-bottom:1px solid var(--rule)}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--accent);color:var(--on-accent);font-family:var(--sans);font-size:14.5px;
  font-weight:600;letter-spacing:.005em;padding:13px 24px;border-radius:var(--radius);
  border:1px solid var(--accent);cursor:pointer;text-align:center;
  box-shadow:var(--shadow-sm);transition:background .16s ease,border-color .16s ease,
  transform .16s ease,box-shadow .16s ease}
.btn:hover{background:var(--accent-dk);border-color:var(--accent-dk);color:var(--on-accent);
  text-decoration:none;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn:active{transform:translateY(0)}
.btn-lg{font-size:16px;padding:17px 34px}
.btn-sm{padding:9px 17px;font-size:13.5px}
.btn-ghost{background:transparent;color:var(--accent);box-shadow:none}
.btn-ghost:hover{background:var(--accent-tint);color:var(--accent-dk);box-shadow:none}
.btn-block{width:100%}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;background:var(--plum);color:var(--cream);
  padding:68px 0 72px;border-bottom:1px solid var(--gold)}
/* the North Indian kundli square, very faint, as the page's watermark */
.hero::before{content:"";position:absolute;top:-70px;right:-130px;width:620px;height:620px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23B08A47' stroke-width='.5'%3E%3Crect x='1' y='1' width='98' height='98'/%3E%3Cpath d='M1 1L99 99M99 1L1 99'/%3E%3Cpath d='M50 1L99 50L50 99L1 50Z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain;
  opacity:.13;pointer-events:none}
/* The two glows are the accent and the gold. Literals first so old browsers keep the
   maroon they always had; where color-mix is supported the glows follow the theme,
   because a maroon wash under a saffron headline reads as a mistake. */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1100px 520px at 12% -10%, rgba(138,46,77,.36), transparent 60%),
             radial-gradient(760px 420px at 96% 108%, rgba(176,138,71,.16), transparent 62%)}
@supports (color: color-mix(in srgb, red, blue)){
  .hero::after{
    background:radial-gradient(1100px 520px at 12% -10%,
                 color-mix(in srgb, var(--accent) 36%, transparent), transparent 60%),
               radial-gradient(760px 420px at 96% 108%,
                 color-mix(in srgb, var(--gold) 16%, transparent), transparent 62%)}
}
.hero .wrap{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:64px;align-items:center}
.hero h1{color:var(--cream);max-width:15ch;margin-bottom:0}
.hero h1 em{font-style:italic;color:var(--gold)}
.hero .lede{font-size:19.5px;max-width:52ch;color:var(--cream-dim);margin-top:22px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:34px 0 32px}
.hero .btn-ghost{color:var(--cream);border-color:rgba(246,241,232,.34);background:transparent}
.hero .btn-ghost:hover{background:rgba(246,241,232,.10);color:#fff;border-color:rgba(246,241,232,.55)}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:12px 28px;padding:0;margin:0;
  font-family:var(--sans);font-size:12.5px;color:var(--cream-mute)}
.trust li{display:flex;align-items:center}

/* the report itself, shown as pages on a desk */
.hero-figure{position:relative;min-height:540px;margin:0}
/* height:auto matters — the imgs carry width/height attributes so the browser can
   reserve space, and without it the intrinsic height wins and the pages stretch. */
.hero-figure img{position:absolute;height:auto;border-radius:2px;box-shadow:var(--shadow-lg)}
.hero-figure .front{width:73%;left:0;top:0;z-index:2;border:1px solid rgba(246,241,232,.14);
  transform:rotate(-2.2deg)}
.hero-figure .back{width:66%;right:0;top:52px;z-index:1;opacity:.94;
  border:1px solid rgba(36,28,51,.10);transform:rotate(3.2deg)}
.hero-figure figcaption{position:absolute;left:0;right:0;bottom:-6px;text-align:center;
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream-mute)}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{padding:64px 0}
.band{background:var(--box);border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);
  padding:64px 0}
.band.alt{background:var(--paper);border:0;border-top:1px solid var(--rule)}
.sec-head{max-width:70ch}
.sec-head.center{margin:0 auto}

/* ==========================================================================
   CARDS
   ========================================================================== */
.cards{display:grid;gap:22px;margin-top:36px}
.cards.four{grid-template-columns:repeat(4,1fr)}
.cards.three{grid-template-columns:repeat(3,1fr)}
.card{position:relative;background:var(--paper);border:1px solid var(--edge);
  border-radius:var(--radius);padding:28px 24px 26px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card::before{content:"";position:absolute;left:24px;top:0;width:34px;height:2px;
  background:var(--gold)}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--rule)}
.card .num{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  color:var(--gold);display:block;margin-bottom:10px}
.card h3{font-size:19px;margin-bottom:9px;line-height:1.25}
.card p{font-size:16px;color:var(--ink-soft);margin:0;line-height:1.58}
.card em{color:var(--accent);font-style:italic}

/* ==========================================================================
   INSIDE THE REPORT — the product, shown rather than described
   ========================================================================== */
/* Crops, not whole pages: a shrunk A4 spread is a picture of a document, and
   a crop at full size is the document. Stacked, because these are three
   different widths and a grid would letterbox two of them. */
.crops{display:flex;flex-direction:column;align-items:center;gap:34px;margin-top:38px}
.crop{width:100%;max-width:880px;background:var(--paper);border:1px solid var(--edge);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease}
.crop:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.crop img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:2px}
.crop figcaption{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);
  margin-top:14px;text-align:center;line-height:1.5}
.crop figcaption b{color:var(--ink);font-weight:600}

/* ==========================================================================
   PRICING
   ========================================================================== */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:36px;
  align-items:stretch}   /* equal height, so the three CTAs land on one line */
/* One product is the client's offer, so the usual three-across grid would strand a
   lone card on the left. Centre it instead, and cap it so it does not read as a banner. */
.tiers.one{grid-template-columns:minmax(0,470px);justify-content:center}
.tier{display:flex;flex-direction:column;border:1px solid var(--edge);border-radius:6px;
  padding:34px 28px;background:var(--paper);position:relative}
.tier.pop{border-color:var(--accent);box-shadow:var(--shadow-md);
  background:linear-gradient(var(--paper),var(--box))}
.ribbon{position:absolute;top:-12px;left:28px;background:var(--accent);color:var(--on-accent);
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;padding:5px 13px;border-radius:2px;box-shadow:var(--shadow-sm)}
.tier h3{font-size:20px;margin-bottom:6px}
.price{font-size:44px;color:var(--ink);margin:8px 0 14px;line-height:1;
  font-variant-numeric:lining-nums;letter-spacing:-.02em}
.price small{font-family:var(--sans);font-size:13px;font-weight:400;color:var(--ink-soft);
  letter-spacing:0;margin-left:8px}
/* No min-height: it existed only to bottom-align three pricing cards, and there
   is one product now. */
.blurb{font-size:16px;color:var(--ink-soft);line-height:1.55}
.tier ul{list-style:none;padding:0;margin:0 0 28px;font-size:16px}
.tier li{display:flex;align-items:flex-start;padding:11px 0;border-top:1px solid var(--rule);
  color:var(--ink-soft);line-height:1.5}
.tier li:first-child{border-top:0}
.tier li.diamond::before{margin-top:9px}
.tier .btn{margin-top:auto}

/* ==========================================================================
   STEPS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:40px;
  counter-reset:step}
.steps>div{position:relative}
.steps span{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
  border:1px solid var(--gold);color:var(--gold);font-family:var(--sans);font-size:15px;
  font-weight:600;margin-bottom:20px;transform:rotate(45deg)}
.steps span b{transform:rotate(-45deg);font-weight:600}
.steps h3{font-size:19px}
.steps p{font-size:16px;color:var(--ink-soft);margin:0}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{max-width:76ch;margin:34px auto 0;border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font-family:var(--serif);font-weight:600;font-size:19px;
  color:var(--accent-dk);list-style:none;display:flex;justify-content:space-between;
  align-items:flex-start;gap:20px;padding:20px 0;transition:color .15s ease}
summary:hover{color:var(--accent)}
summary::-webkit-details-marker{display:none}
summary::after{content:"";flex:none;width:9px;height:9px;margin-top:9px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg);transition:transform .2s ease}
details[open] summary::after{transform:rotate(-135deg)}
details p{margin:0 0 22px;color:var(--ink-soft);font-size:17px;max-width:68ch}

/* ==========================================================================
   FORMS
   ========================================================================== */
/* Same trap as .order-page: the shorthand would zero the 26px side padding .wrap
   sets, and the pay and status pages would sit against the window edge too. */
.form-page{padding-top:40px;padding-bottom:72px;max-width:780px}
.form-page.narrow{max-width:640px;text-align:center}
.back{font-family:var(--sans);font-size:13px;color:var(--ink-soft);display:inline-block;
  margin-bottom:20px}
.back:hover{color:var(--accent)}
/* THE ORDER PAGE. One screen: every field, the price and the button reachable on a
   laptop without scrolling. That is what makes it dense - two fields to a row, small
   labels, hints folded into placeholders, and a heading that does not eat a third of
   the fold. Wider than the rest of the site on purpose: a form is not prose, and a
   780px column would put half the desktop to no use. */
/* padding-top/bottom, never the shorthand: .wrap sets the 26px side padding and a
   shorthand here silently zeroes it, which put the fields hard against the window
   edge at any viewport 1280px or narrower. */
.order-page{max-width:1280px;padding-top:clamp(14px,1.75vh,36px);
  padding-bottom:clamp(28px,3.6vh,60px)}
.order-head{margin-bottom:clamp(12px,1.5vh,26px)}
.order-page h1{font-size:clamp(26px,min(2.4vw,3.6vh),38px);margin-bottom:6px}
.order-page .sub{font-size:15.5px;max-width:none;margin:0}
.order-page .back{margin-bottom:6px}
.order-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:34px;
  align-items:start}
.form-col{display:flex;flex-direction:column;gap:clamp(13px,1.6vh,26px);min-width:0}
/* two fields to a row; .wide spans both */
.group{border:0;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(10px,1.25vh,20px) 18px;align-items:start}
.group.three{grid-template-columns:repeat(3,1fr)}
.wide{grid-column:1/-1}
/* the section label: a legend with a hairline running off it, 16px instead of the 50px
   a bordered heading was costing three times over */
.leg{grid-column:1/-1;display:flex;align-items:center;gap:14px;font-family:var(--sans);
  font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0}
.leg::after{content:"";flex:1;height:1px;background:var(--rule)}
/* compact controls, scoped to this form so the rest of the site keeps its size */
.order-grid .field{gap:clamp(4px,.5vh,8px)}
.order-grid .field>span{line-height:1.3}
.order-grid input,.order-grid select,.order-grid textarea{padding:clamp(10px,1.25vh,16px) 13px;
  font-size:16px}
/* the question grows with the window too - rows= is only its floor */
.order-grid textarea{height:clamp(88px,11.4vh,168px)}
.order-grid textarea{line-height:1.45}
.order-grid .check{padding:clamp(9px,1.15vh,15px) 13px;font-size:15px;align-items:center}
.order-grid .check input{margin-top:0}
.order-grid .hint{font-size:12px}
.field{display:flex;flex-direction:column;gap:8px}
.field>span{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:.01em}
.field .opt{font-family:var(--serif);font-weight:400;color:var(--ink-soft);font-style:italic}
input,select,textarea{font-family:var(--serif);font-size:17px;color:var(--ink);
  padding:13px 15px;border:1px solid var(--rule);border-radius:var(--radius);
  background:var(--paper);width:100%;transition:border-color .15s ease,box-shadow .15s ease}
input:hover,select:hover,textarea:hover{border-color:var(--gold)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint)}
input:disabled{background:var(--box);color:var(--ink-mute);border-color:var(--edge)}
textarea{resize:vertical;line-height:1.58}
.check{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:var(--ink-soft);
  cursor:pointer;background:var(--box);border:1px solid var(--edge);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .15s ease}
.check:hover{border-color:var(--gold)}
.check input{width:17px;height:17px;margin-top:4px;flex:none;accent-color:var(--accent)}
.hint{font-family:var(--sans);font-size:12.5px;color:var(--ink-soft);font-style:normal;margin:0}
.err{font-family:var(--sans);font-size:12.5px;color:var(--danger);font-style:normal}
.err-box{background:var(--box);border:1px solid var(--edge);border-radius:var(--radius);
  padding:14px;font-size:11px;text-align:left;overflow:auto;white-space:pre-wrap}

/* the buy panel: what you are buying, the price, and the button that buys it */
.buy{position:sticky;top:calc(var(--navh) + 20px);display:flex;flex-direction:column;
  gap:clamp(15px,1.9vh,22px);background:var(--box);border:1px solid var(--edge);
  border-top:3px solid var(--gold);border-radius:var(--radius);
  padding:clamp(22px,2.8vh,32px) 24px}
.buy h2{font-size:20px;color:var(--ink);margin:0;line-height:1.28}
.buy .price{font-size:34px;margin:0}
.buy ul{list-style:none;padding:0;margin:0;font-family:var(--sans);font-size:13.5px;
  color:var(--ink-soft);display:flex;flex-direction:column;gap:10px;line-height:1.45}
.buy li{display:flex;align-items:flex-start}
.buy li.diamond::before{margin-top:7px}
.buy .btn{margin-top:3px;font-size:15px;padding:15px 20px;line-height:1.3}
.buy .tiny{margin:0}
/* the phone stand-in for the rail, which falls below the fields at that width */
.buying{display:none;font-family:var(--sans);font-size:14px;font-weight:600;
  color:var(--ink);margin:18px 0 0}

/* ==========================================================================
   STATUS
   ========================================================================== */
.working,.done{padding:44px 0}
.spinner{width:46px;height:46px;margin:0 auto 28px;border:2px solid var(--edge);
  border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.progress{list-style:none;padding:0;margin:38px auto 0;max-width:360px;text-align:left;
  font-family:var(--sans);font-size:14px;color:var(--cream-mute)}
.progress li{padding:10px 0 10px 30px;position:relative}
.progress li::before{content:"";position:absolute;left:2px;top:17px;width:7px;height:7px;
  border:1px solid var(--rule);transform:rotate(45deg)}
.progress li.on{color:var(--ink)}
.progress li.on::before{background:var(--gold);border-color:var(--gold)}
.tick{width:62px;height:62px;margin:0 auto 24px;border:1px solid var(--gold);
  transform:rotate(45deg);display:flex;align-items:center;justify-content:center;
  background:var(--box)}
.tick svg{width:24px;height:24px;fill:var(--gold);transform:rotate(-45deg)}
.notice{background:var(--box);border:1px solid var(--edge);border-left:3px solid var(--gold);
  border-radius:var(--radius);padding:18px 20px;margin:26px 0;text-align:left;font-size:16px;
  color:var(--ink-soft);line-height:1.58}
.notice b{color:var(--ink)}
.notice.warn{border-left-color:var(--accent);background:var(--accent-tint);border-color:var(--accent-edge)}
.done .btn{margin-top:14px}

/* ==========================================================================
   ADMIN
   ========================================================================== */
.statrow{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0}
.statrow div{background:var(--box);border:1px solid var(--edge);padding:16px 22px;
  border-radius:var(--radius);min-width:116px}
.statrow b{display:block;font-size:26px;font-variant-numeric:lining-nums}
.statrow span{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft)}
.tbl{width:100%;border-collapse:collapse;font-size:14px;margin-top:16px}
.tbl th{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent);text-align:left;
  border-bottom:1.5px solid var(--accent);padding:10px 8px}
.tbl td{border-bottom:1px solid var(--rule);padding:11px 8px;vertical-align:top}
.tbl tr.flag{background:var(--accent-tint)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
footer{background:var(--plum);color:var(--cream-mute);padding:64px 0 28px;
  border-top:1px solid var(--gold)}
footer .brand{color:var(--cream)}
footer .brand em{color:var(--gold)}
.foot-grid{max-width:var(--wrap);margin:0 auto;padding:0 26px;display:grid;
  grid-template-columns:1.5fr 1fr 1.5fr;gap:48px}
footer h4{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.foot-grid a{display:block;color:var(--cream-dim);font-size:15px;padding:5px 0}
.foot-grid a:hover{color:var(--cream)}
footer .tiny{color:var(--cream-mute)}
footer .crisis{color:var(--cream-dim);border-left:2px solid var(--gold);padding-left:14px;
  margin-top:16px}
/* checkout pages: the same band, without the navigation */
.foot-slim{padding:0}
.foot-slim .foot-base{margin:0 auto;border-top:0;padding:15px 26px}
.foot-base{max-width:var(--wrap);margin:44px auto 0;padding:22px 26px 0;
  border-top:1px solid rgba(246,241,232,.13);font-family:var(--sans);font-size:12px;
  color:var(--cream-mute);display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:space-between}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;gap:52px}
  .hero h1{max-width:18ch}
  /* width:100% is load-bearing - auto margins on a grid item switch off stretch,
     and every child here is absolutely positioned, so the figure collapsed to 0. */
  .hero-figure{min-height:520px;max-width:520px;width:100%;margin-inline:auto}
  .cards.four{grid-template-columns:repeat(2,1fr)}
}
/* Below this the rail has nowhere to sit: one column, and the panel - button and all -
   goes under the fields, which is the order you fill them in anyway. */
@media (max-width:900px){
  .order-grid{grid-template-columns:1fr;gap:24px}
  .buy{position:static}
  .buying{display:block}
}
/* A window under 740px tall - an older 1280x720 laptop, or a 1024x700 one - cannot
   hold the form at the sizes the rest of the range uses. Everything here is a floor
   pushed lower for that window only; the clamps above are untouched, so nothing
   changes at 741px and over. The trust line under the heading is the one element
   that goes entirely: it is the only thing on this page that can, without losing a
   field or a warning. The goal is the whole page, footer included, above the fold. */
@media (max-height:740px){
  .order-page{padding-top:6px;padding-bottom:8px}
  .order-page .sub{display:none}
  .order-head{margin-bottom:8px}
  .form-col{gap:10px}
  .group,.group.three{gap:8px 18px}
  .order-grid .field{gap:3px}
  .order-grid input,.order-grid select,.order-grid textarea{padding:8px 13px}
  .order-grid textarea{height:72px}
  .order-grid .check{padding:7px 13px}
  .buy{gap:12px;padding:18px 20px}
}
/* three to a row needs the room a laptop has; below that language drops to its own row */
@media (max-width:820px){
  .group.three{grid-template-columns:1fr 1fr}
}
/* below this two fields to a row start cramping: stack them */
@media (max-width:620px){
  .group,.group.three{grid-template-columns:1fr}
}
@media (max-width:820px){
  body{font-size:17px}
  .cards.four,.cards.three,.tiers,.steps,.foot-grid{grid-template-columns:1fr}
  .steps,.foot-grid{gap:34px}
  .nav nav a:not(.btn){display:none}
  .nav-inner{padding:14px 20px}
  :root{--navh:71px}
  .hero{padding:48px 0 52px}
  .sec,.band{padding:48px 0}
  /* one page, centred: two overlapping pages are unreadable in a phone column */
  .hero-figure{min-height:352px}
  .hero-figure .back{display:none}
  .hero-figure .front{width:62%;left:50%;transform:translateX(-50%) rotate(-1.8deg)}
  .foot-base{justify-content:flex-start}
}
/* The bar is sticky now, so every pixel of it is one the page never gets back. On a
   phone the CTA was wrapping to a second line and the bar stood 94px tall - a ninth of
   the screen, permanently. Shrink the row until it sits on one line. */
@media (max-width:430px){
  :root{--navh:62px}
  .nav-inner{gap:12px;padding:11px 16px}
  .nav nav{gap:12px}
  .nav .btn-sm{padding:8px 13px;font-size:12.5px}
  .brand{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}
@media print{.strip,.nav,footer,.hero-figure{display:none}}