/* EggFactory marketing site - styles.
 *
 * Lifted out of index.html on 25-Aug-2026. It lived inline, which was fine for
 * one page and stops being fine the moment there is a second: three language
 * copies of a single 100KB file would each carry their own copy of this, so a
 * fix like the lightbox centring bug would have to be made three times and the
 * one that was missed would ship. Shared file, edited once.
 *
 * Served with no-cache (see firebase.json) rather than a content hash, because
 * this site has no build step to hash with. The browser revalidates and gets a
 * 304 when nothing changed.
 */
:root{
  --indigo-700:#4338ca; --indigo-600:#4f46e5; --indigo-500:#6366f1; --indigo-100:#e0e7ff; --indigo-50:#eef2ff;
  --emerald-700:#047857; --emerald-600:#059669; --emerald-500:#10b981; --emerald-50:#ecfdf5;
  --amber-500:#f59e0b; --amber-50:#fffbeb;
  --rose-500:#f43f5e; --sky-500:#0ea5e9; --violet-500:#8b5cf6; --cyan-600:#0891b2;
  --slate-900:#0f172a; --slate-700:#334155; --slate-600:#475569; --slate-500:#64748b;
  --slate-400:#94a3b8; --slate-200:#e2e8f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px}
body{font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--slate-700);background:#fff;line-height:1.65;font-size:16.5px}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{color:var(--slate-900);line-height:1.15;text-wrap:balance}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:800;letter-spacing:-.02em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.eyebrow{display:block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-600);margin-bottom:10px}
.sub{max-width:640px;color:var(--slate-500);margin-top:14px;font-size:1.06rem}
section{padding:84px 0}
.btn{display:inline-block;font-weight:700;border-radius:10px;padding:13px 26px;font-size:1rem;transition:transform .15s,box-shadow .15s,background .15s;cursor:pointer;border:0}
.btn-primary{background:var(--indigo-600);color:#fff;box-shadow:0 8px 20px -8px rgba(79,70,229,.55)}
.btn-primary:hover{background:var(--indigo-700);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--indigo-700);border:1.5px solid var(--slate-200)}
.btn-ghost:hover{border-color:var(--indigo-500);background:var(--indigo-50)}

/* NAV */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--slate-100)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:88px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.25rem;color:var(--slate-900)}
.logo img{height:50px;width:auto;display:block}
/* The lockup is 4.25:1, so 50px tall is 213px wide - too much beside a hamburger
   on a 360px phone. Step it down rather than let the nav wrap to two rows. */
@media(max-width:600px){.nav-in{height:72px}.logo img{height:38px}}
.nav-links{display:flex;gap:30px;font-weight:600;font-size:.95rem;color:var(--slate-600)}
.nav-links a:hover{color:var(--indigo-600)}
.nav-cta{display:flex;gap:12px;align-items:center}
.hamburger{display:none;background:none;border:0;font-size:1.6rem;color:var(--slate-700);cursor:pointer}
/* The bar carries nine links since Guides joined it (#74). Three things keep
   it on ONE line instead of letting labels break mid-phrase:

   1. white-space:nowrap on each link. .nav-links was already nowrap as a
      FLEX container, which stops the ITEMS wrapping but does nothing about
      the text inside one - so a squeezed bar broke "Who It's For" across two
      lines and the row went ragged. That was the actual defect.
   2. A wider bar than the 1120px .wrap the rest of the page uses. The nav is
      the one row that has to hold everything at once.
   3. The hamburger breakpoint raised from 880px to 1080px, below. Widening
      alone cannot help between 880 and 1080, where the VIEWPORT rather than
      the cap is the constraint: the bar was simply over-full and shrinking
      to fit is what made it look cramped.

   Measured at gap 22: logo 200 + links 702 + cta 107 = 1009px, which clears
   1080 - 48 of padding = 1032. Add a tenth link and re-measure, because that
   headroom is 23px. */
.nav-in{max-width:1280px}
.nav-links{gap:22px}
.nav-links a{white-space:nowrap}
@media(max-width:1080px){
  .nav-links,.nav-cta .btn-ghost{display:none}
  .hamburger{display:block}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:18px 24px;gap:16px;border-bottom:1px solid var(--slate-200);box-shadow:0 20px 30px -20px rgba(15,23,42,.2)}
}

/* HERO */
/* --- Farm banner ------------------------------------------------------- */
/* width/height on the <img> give the browser the aspect ratio up front, so the
   hero does not jump down the page when the photograph finishes loading. */
.banner{position:relative;width:100%;height:clamp(190px,29vw,370px);overflow:hidden;background:var(--slate-900)}
.banner img{width:100%;height:100%;object-fit:cover;object-position:center 44%;display:block}

.hero{background:linear-gradient(180deg,var(--indigo-50) 0%,#fff 78%);padding:54px 0 60px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
@media(max-width:880px){.hero-grid{grid-template-columns:1fr}}
.hero h1{font-size:clamp(2.2rem,5vw,3.35rem);font-weight:900;letter-spacing:-.03em}
.hero h1 em{font-style:normal;color:var(--indigo-600)}
.hero p.lead{margin:20px 0 30px;font-size:1.15rem;color:var(--slate-600);max-width:520px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-note{margin-top:14px;font-size:.85rem;color:var(--slate-500)}

/* Dashboard mock */
/* The hero screenshot, in a window frame. The frame is what stops a flat
   rectangle of UI reading as a stray image dropped on the page. */
.shot{margin:0;background:#fff;border:1px solid var(--slate-200);border-radius:16px;box-shadow:0 40px 70px -30px rgba(15,23,42,.25);overflow:hidden}
.shot-bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid var(--slate-100);background:var(--slate-50)}
.shot-bar span{width:10px;height:10px;border-radius:50%;background:var(--slate-200)}
.shot-bar span:first-child{background:#fda4af}.shot-bar span:nth-child(2){background:#fcd34d}.shot-bar span:nth-child(3){background:#86efac}
/* The capture is 1180x780 and the img carries those as attributes, so the hero
   reserves its height before the file lands and nothing below it jumps. */
.shot img{display:block;width:100%;height:auto}
.shot-name{margin-left:10px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500)}
/* The stage is sized by whichever slide is showing; the rest are stacked on top
   of it and faded out, so the frame never changes height between screens. */
.shot-stage{position:relative;display:grid}
.slide{grid-area:1/1;opacity:0;transition:opacity .5s ease;pointer-events:none}
.slide.is-on{opacity:1;pointer-events:auto}
.shot-note{margin:14px 0 0;font-size:.78rem;color:var(--slate-500);text-align:center}
.shot-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.shot-arrow{width:30px;height:30px;border-radius:50%;border:1px solid var(--slate-200);background:#fff;color:var(--slate-500);font-size:1.1rem;line-height:1;cursor:pointer;transition:.15s}
.shot-arrow:hover{border-color:var(--indigo-500);color:var(--indigo-600)}
.dots{display:flex;gap:16px}
.dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;background:var(--slate-200);cursor:pointer;transition:.2s}
.dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%}
.dot.is-on{background:var(--indigo-600);width:22px;border-radius:99px}
/* Someone who has asked their system for less motion gets a still hero and the
   arrows, not a slideshow that moves under them. The script honours the same
   query, so this is only the visual half. */
@media(prefers-reduced-motion:reduce){.slide{transition:none}}
/* The hand-drawn dashboard mock (.mock-body, .kpi, .panel, .bars, .donut, .mock-rows, .pill) was replaced by a real screenshot on 18-Aug-2026. */

/* TRUST STRIP */
.strip{border-top:1px solid var(--slate-100);border-bottom:1px solid var(--slate-100);background:var(--slate-50);padding:34px 0}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:720px){.strip-grid{grid-template-columns:repeat(2,1fr)}}
.strip b{display:block;font-size:clamp(1.1rem,4.6vw,1.7rem);font-weight:900;color:var(--slate-900)}
.strip span{font-size:.85rem;color:var(--slate-500)}

/* PERSONAS */
.personas{background:#fff}
.p-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
@media(max-width:820px){.p-grid{grid-template-columns:1fr}}
.p-card{border:1px solid var(--slate-200);border-radius:var(--radius);padding:28px;transition:box-shadow .2s,transform .2s}
.p-card:hover{box-shadow:0 24px 40px -24px rgba(15,23,42,.25);transform:translateY(-2px)}
.p-card .tag{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 12px;border-radius:99px;margin-bottom:14px}
.p-card h3{font-size:1.2rem;margin-bottom:8px}
.p-card p{color:var(--slate-500);font-size:.96rem}
.p-card ul{margin:14px 0 0 18px;color:var(--slate-600);font-size:.93rem}
.p-card li{margin:5px 0}
.t-owner{background:var(--indigo-50);color:var(--indigo-700)}
.t-mgr{background:var(--emerald-50);color:var(--emerald-700)}
.t-vet{background:#fdf2f8;color:#be185d}
.t-acct{background:var(--amber-50);color:#b45309}

/* FEATURES */
.features{background:var(--slate-50)}
.f-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:44px}
@media(max-width:880px){.f-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.f-grid{grid-template-columns:1fr}}
.f-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:24px}
.f-card .ico{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:14px;background:var(--indigo-50)}
.f-card h3{font-size:1.03rem;margin-bottom:6px}
.f-card p{font-size:.9rem;color:var(--slate-500)}

/* GALLERY - the screens that did not fit the hero carousel, at a size where the
   figures are still readable. Same 1180x780 captures and the same responsive
   variants as the hero, so this costs no extra build step; only the frame and
   the caption differ. Lazy-loaded: ten screenshots below the fold must not be
   on the critical path of a farm on a slow connection. */
.gal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:44px}
.gal{border:1px solid var(--slate-200);border-radius:var(--radius);overflow:hidden;background:#fff;transition:box-shadow .2s,transform .2s}
.gal:hover{box-shadow:0 24px 40px -24px rgba(15,23,42,.25);transform:translateY(-2px)}
.gal img{display:block;width:100%;height:auto;border-bottom:1px solid var(--slate-100)}
.gal figcaption{padding:16px 20px 20px}
.gal h3{font-size:1rem;margin-bottom:5px}
.gal p{font-size:.88rem;color:var(--slate-500)}
@media(max-width:820px){.gal-grid{grid-template-columns:1fr}}

/* THE PERMISSION MATRIX. Generated from backend/app/permissions.py - these are
   the shipped defaults, not an illustration. The row worth reading twice is
   Finance Center: the Farm Manager, who can edit everything operational, cannot
   open it at all. That is separation of duties, and it is the thing an owner is
   actually asking about when they ask about roles. */
.rbac{display:grid;grid-template-columns:1fr 1.15fr;gap:34px;align-items:start;margin-top:38px}
/* A grid item defaults to min-width:auto, so the 460px min-width on the matrix
   below refused to shrink and dragged the whole PAGE wider than a phone screen -
   127px of sideways scroll at 375px, on every section, not just this one. min-width:0
   lets the column shrink and hands the scrolling to .matrix-wrap, where it belongs. */
.rbac > *{min-width:0}
.rbac-note{font-size:.93rem;color:var(--slate-600);line-height:1.65}
.rbac-note strong{color:var(--slate-900)}
.rbac-note ul{margin:16px 0 0 18px}
.rbac-note li{margin:7px 0}
.matrix-wrap{overflow-x:auto;border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff}
table.matrix{border-collapse:collapse;width:100%;font-size:.84rem;min-width:460px}
table.matrix th,table.matrix td{padding:9px 10px;text-align:center;border-bottom:1px solid var(--slate-100)}
table.matrix thead th{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--slate-500);background:var(--slate-50)}
table.matrix tbody th{text-align:left;font-weight:600;color:var(--slate-700);white-space:nowrap}
table.matrix tr:last-child td,table.matrix tr:last-child th{border-bottom:0}
.pm{display:inline-block;min-width:44px;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:99px}
.pm-e{background:var(--indigo-600);color:#fff}
.pm-v{background:var(--indigo-50);color:var(--indigo-600)}
.pm-n{color:var(--slate-500)}
.matrix-cap{font-size:.78rem;color:var(--slate-500);padding:10px 12px;background:var(--slate-50);border-top:1px solid var(--slate-100)}
@media(max-width:900px){.rbac{grid-template-columns:1fr;gap:24px}}

/* LIGHTBOX. A gallery thumbnail is ~540px wide; the figures on these screens are
   readable there but not comfortable, and a prospect who clicks has told you
   they want to look properly. Opens the 1800px variant, which is fetched only
   on that click.
   The whole tile is a <button> rather than a div with a click handler: it is a
   real control, so it gets keyboard focus, Enter/Space and a focus ring for
   free, and screen readers announce it as something operable. */
.gal-open{display:block;width:100%;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:zoom-in}
.gal-open:focus-visible{outline:3px solid var(--indigo-600);outline-offset:2px}
.gal-open img{transition:transform .35s ease}
.gal:hover .gal-open img{transform:scale(1.02)}
.shot-stage{cursor:zoom-in}
.shot-stage:focus-visible{outline:3px solid #fff;outline-offset:-3px}
/* Sized so the IMAGE fits without letterboxing: the captures are 1180x780, so
   the width a given viewport height allows is (height - chrome) x 1.513. The
   three-way min means neither a narrow window nor a short one can clip it. */
/* margin:auto is what centres a modal <dialog> - it comes from the UA
   stylesheet, and this page's reset (*{margin:0}) wipes it. Without it the
   panel pins to the top-left corner and the whole viewport minus that
   corner is still the dialog's own box, so 'click outside to close' never
   fires. Restated here deliberately. */
.lb{width:min(94vw,calc((100vh - 190px) * 1.513),1800px);max-width:none;max-height:none;margin:auto;padding:0;border:0;background:transparent;overflow:visible}
.lb::backdrop{background:rgba(15,23,42,.82)}
.lb-inner{position:relative;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 40px 90px -25px rgba(0,0,0,.55)}
.lb-inner img{display:block;width:100%;height:auto}
.lb-cap{padding:14px 20px 16px}
.lb-cap h3{font-size:1.02rem;margin-bottom:3px}
.lb-cap p{font-size:.88rem;color:var(--slate-500)}
.lb-close{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(15,23,42,.55);color:#fff;font-size:1.3rem;line-height:1;cursor:pointer;transition:.15s}
.lb-close:hover{background:rgba(15,23,42,.8)}
.lb[open]{animation:lbIn .22s ease-out}
.lb[open]::backdrop{animation:lbFade .22s ease-out}
@keyframes lbIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
/* Someone who asked their system for less motion gets the panel, not the move. */
@media(prefers-reduced-motion:reduce){.lb[open],.lb[open]::backdrop{animation:none}.gal-open img,.gal:hover .gal-open img{transition:none;transform:none}}
@media(max-width:820px){.lb{width:min(96vw,calc((100vh - 120px) * 1.513))}}

/* HOW IT WORKS */
.how .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:820px){.how .steps{grid-template-columns:1fr}}
.step{position:relative;padding:26px;border-radius:var(--radius);background:var(--indigo-50)}
.step:nth-child(2){background:var(--emerald-50)}
.step:nth-child(3){background:var(--amber-50)}
.step b.num{position:absolute;top:-16px;left:22px;width:34px;height:34px;border-radius:10px;background:var(--slate-900);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900}
.step h3{font-size:1.05rem;margin-bottom:6px}
.step p{font-size:.92rem;color:var(--slate-600)}

/* SPOTLIGHTS */
.spot{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-top:60px}
.spot:first-of-type{margin-top:44px}
@media(max-width:820px){.spot{grid-template-columns:1fr;gap:24px}.spot .art{order:2}}
.spot .art{border-radius:var(--radius);padding:28px;border:1px solid var(--slate-200);background:#fff;box-shadow:0 24px 44px -30px rgba(15,23,42,.3)}
.ledger div{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;padding:7px 4px;border-bottom:1px dashed var(--slate-200);color:var(--slate-600)}
.ledger div:last-child{border:0;font-weight:800;color:var(--slate-900)}
.ledger .cr{color:var(--emerald-700)}
.spot h3{font-size:1.5rem;margin-bottom:10px}
.spot p{color:var(--slate-500)}
.spot ul{margin:14px 0 0 18px;color:var(--slate-600);font-size:.95rem}
.spot li{margin:6px 0}
.batchline{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--slate-600);padding:8px 4px;border-bottom:1px dashed var(--slate-200)}
.batchline:last-child{border:0}
.batchline .chip{font-family:ui-monospace,monospace;font-size:.68rem;background:var(--indigo-50);color:var(--indigo-700);padding:2px 8px;border-radius:6px}
.batchline .arrow{color:var(--slate-500)}

/* PRICING */
.pricing{background:var(--slate-50)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:stretch}
@media(max-width:820px){.price-grid{grid-template-columns:1fr}}
.price{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column}
.price.hot{border:2px solid var(--indigo-500);position:relative}
.price.hot .flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--indigo-600);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 14px;border-radius:99px}
.price h3{font-size:1.05rem}
.price .amt{font-size:2.1rem;font-weight:900;color:var(--slate-900);margin:12px 0 2px}
.price .amt span{font-size:.85rem;font-weight:600;color:var(--slate-500)}
.price .per{font-size:.85rem;color:var(--slate-500);margin-bottom:18px}
.price ul{list-style:none;margin-bottom:24px}
.price li{padding:6px 0 6px 26px;position:relative;font-size:.92rem;color:var(--slate-600)}
.price li::before{content:"✓";position:absolute;left:0;color:var(--emerald-500);font-weight:900}
.price .btn{margin-top:auto;text-align:center}

/* FAQ */
.faq-list{max-width:760px;margin:40px auto 0}
.faq-item{border:1px solid var(--slate-200);border-radius:12px;margin-bottom:10px;background:#fff;overflow:hidden}
.faq-item summary{list-style:none;cursor:pointer;gap:18px;padding:18px 22px;font-weight:700;color:var(--slate-900);display:flex;justify-content:space-between;align-items:center}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--indigo-500);font-weight:400}
.faq-item[open] summary::after{content:"−"}
.faq-item .a{padding:0 22px 18px;color:var(--slate-500);font-size:.95rem}

/* CTA + FOOTER */
.cta{background:linear-gradient(135deg,var(--indigo-700),var(--indigo-500));color:#fff;text-align:center;border-radius:20px;padding:64px 32px;margin:0 24px}
.cta h2{color:#fff}
.cta p{color:var(--indigo-100);max-width:560px;margin:14px auto 30px}
.cta .btn-primary{background:#fff;color:var(--indigo-700);box-shadow:none}
.cta .btn-primary:hover{background:var(--indigo-50)}
footer{padding:56px 0 40px;color:var(--slate-500);font-size:.9rem}
.foot-grid{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-grid .logo{font-size:1.05rem}
.foot-grid .logo img{height:34px}
.foot-links{display:flex;gap:26px;flex-wrap:wrap;font-weight:600;color:var(--slate-500)}
.foot-links a:hover{color:var(--indigo-600)}
.copyright{margin-top:30px;border-top:1px solid var(--slate-100);padding-top:20px;font-size:.82rem}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.on{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- Pricing: one plan, stated plainly ------------------------------- */
.pricebox{background:#fff;border:2px solid var(--indigo-500);border-radius:var(--radius);padding:30px;margin-top:40px}
.pricebox-head{display:flex;align-items:center;justify-content:center;gap:34px;flex-wrap:wrap;text-align:center}
.pricebox .amt{font-size:2.4rem;font-weight:900;color:var(--slate-900)}
.pricebox .amt span{font-size:.85rem;font-weight:600;color:var(--slate-500)}
.pricebox .per{font-size:.88rem;color:var(--slate-500)}
.pricebox .plus{font-size:1.8rem;font-weight:800;color:var(--indigo-500)}
.pricebox-note{margin-top:22px;padding-top:20px;border-top:1px solid var(--slate-200);font-size:.92rem;color:var(--slate-600);line-height:1.65;text-align:center}
.price-h3{text-align:center;margin:46px 0 16px;font-size:1.12rem}
.price-table-wrap{overflow-x:auto;border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff}
.price-table{width:100%;border-collapse:collapse;font-size:.93rem;min-width:520px}
.price-table th{text-align:left;padding:13px 18px;background:var(--slate-50);color:var(--slate-500);font-size:.76rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--slate-200)}
.price-table td{padding:12px 18px;border-bottom:1px solid var(--slate-100);color:var(--slate-600)}
.price-table tr:last-child td{border-bottom:0}
/* The negotiated tier. Tinted and top-ruled so the eye reads it as the end of
   the ladder rather than one more computed row - the three published columns
   stop applying here, and it should not look as though they carry on. */
.price-table tr.price-talk td{background:var(--indigo-50);border-top:1px solid var(--indigo-100);color:var(--slate-600)}
.price-table tr.price-talk td strong{color:var(--indigo-700)}
.price-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media(max-width:820px){.price-cols{grid-template-columns:1fr}}
.price-col{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:24px}
.price-col h4{font-size:1rem;margin-bottom:8px}
.price-col p{font-size:.9rem;color:var(--slate-500);line-height:1.6}
.price-col .tiny{font-size:.8rem;color:var(--slate-500);margin-top:8px}
/* A full-width sibling of .price-cols rather than a fourth grid item: the grid is a
   fixed three columns, so a fourth card would sit alone on a second row. */
.price-col-wide{margin-top:22px}

/* --- AI section ------------------------------------------------------- */
.ai{background:linear-gradient(180deg,var(--slate-900),#111827);color:#fff}
.ai .eyebrow{color:#a5b4fc}
.ai h2{color:#fff}
.ai .sub{color:#cbd5e1}
.ai-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:900px){.ai-grid{grid-template-columns:1fr}}
.ai-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius);padding:26px}
.ai-card h3{font-size:1.03rem;color:#fff;margin-bottom:8px}
.ai-card p{font-size:.9rem;color:#cbd5e1;line-height:1.65}
.ai-note{margin-top:34px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-left:4px solid #818cf8;border-radius:12px;padding:22px 24px;font-size:.93rem;color:#e2e8f0;line-height:1.7}
.ai-note strong{color:#fff}

/* --- Demo request form ------------------------------------------------ */
/* White, not slate: these labels sit on the CTA's indigo gradient, where the
   page-wide muted grey all but disappears. */

/* --- Pricing fairness -------------------------------------------------- */
.fair{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:32px;margin-top:34px}
.fair-h{font-size:1.35rem;margin-bottom:10px}
.fair-lead{font-size:1rem;color:var(--slate-600);line-height:1.7;max-width:62em}
.fair-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 30px;margin:28px 0 6px}
@media(max-width:820px){.fair-grid{grid-template-columns:1fr}}
.fair-item{display:flex;gap:14px;align-items:flex-start}
.fair-num{flex:none;width:30px;height:30px;border-radius:99px;background:var(--indigo-50);color:var(--indigo-600);font-weight:900;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.fair-item h4{font-size:.98rem;margin-bottom:5px;line-height:1.35}
.fair-item p{font-size:.88rem;color:var(--slate-500);line-height:1.6}
.fair-worked{margin-top:30px;padding-top:28px;border-top:1px solid var(--slate-200)}
.fair-worked h4{font-size:1.05rem}
.fair-worked-sub{font-size:.9rem;color:var(--slate-500);margin:4px 0 16px}
/* The worked example was the only table on the page with no scroll container,
   and its figure columns are white-space:nowrap - so on a narrow phone it could
   not shrink and pushed the whole page sideways. */
.fair-table-wrap{overflow-x:auto;margin-bottom:22px}
.fair-table{width:100%;border-collapse:collapse;font-size:.92rem;margin-bottom:0}
.fair-table td{padding:10px 12px;border-bottom:1px solid var(--slate-100);color:var(--slate-600)}
.fair-table td.n{text-align:right;font-weight:700;color:var(--slate-900);white-space:nowrap}
.fair-table td.m{text-align:right;color:var(--slate-500);font-size:.85rem;white-space:nowrap}
.fair-table tr.tot td{border-top:2px solid var(--slate-200);border-bottom:0;font-weight:800;color:var(--slate-900);padding-top:12px}
.fair-compare{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.fair-compare{grid-template-columns:1fr}}
.fair-vs{border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:3px}
.fair-vs .lbl{font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.fair-vs .amt{font-size:1.9rem;font-weight:900;line-height:1.15}
.fair-vs .exp{font-size:.84rem}
.fair-vs.bad{background:#fef2f2;border:1px solid #fecaca}
.fair-vs.bad .lbl{color:#b91c1c}.fair-vs.bad .amt{color:#991b1b}.fair-vs.bad .exp{color:#b91c1c}
.fair-vs.good{background:#ecfdf5;border:1px solid #a7f3d0}
.fair-vs.good .lbl{color:#047857}.fair-vs.good .amt{color:#065f46}.fair-vs.good .exp{color:#047857}
.fair-foot{margin-top:16px;font-size:.9rem;color:var(--slate-500);font-style:italic}

/* --- Pricing comparison ------------------------------------------------ */
.cmp{margin-top:34px}
.cmp-h{font-size:1.3rem;margin-bottom:8px}
.cmp-lead{font-size:.98rem;color:var(--slate-600);line-height:1.7;max-width:62em;margin-bottom:22px}
.cmp-table-wrap{overflow-x:auto;border:1px solid var(--slate-200);border-radius:var(--radius);background:#fff}
.cmp-table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:680px}
.cmp-table th{text-align:left;padding:13px 18px;background:var(--slate-50);color:var(--slate-500);font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--slate-200)}
.cmp-table td{padding:14px 18px;border-bottom:1px solid var(--slate-100);color:var(--slate-600);vertical-align:top;line-height:1.55}
.cmp-table td.warn{color:#b45309;font-weight:600}
.cmp-table td.good{color:#047857;font-weight:700}
.cmp-table tr.ours td{background:#ecfdf5;border-bottom:0}
.cmp-table tr.ours td strong{color:#065f46}
.cmp-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
@media(max-width:900px){.cmp-notes{grid-template-columns:1fr}}
.cmp-note{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:22px}
.cmp-note h4{font-size:.97rem;margin-bottom:7px;line-height:1.35}
.cmp-note p{font-size:.88rem;color:var(--slate-500);line-height:1.6}

.faq-group{margin:34px 0 12px;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo-600)}
.faq-group:first-of-type{margin-top:28px}
.faq-note{max-width:760px;margin:26px auto 0;font-size:.9rem;color:var(--slate-500);text-align:center;line-height:1.65}

/* --- Coming soon (pre-launch placeholder) ------------------------------ */
.soon{background:linear-gradient(135deg,var(--indigo-700),var(--indigo-500));color:#fff;border-radius:20px;padding:56px 32px;margin:0 24px;text-align:center}
.soon-chip{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);padding:6px 14px;border-radius:99px;margin-bottom:18px}
.soon h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.5rem)}
.soon-lead{max-width:60ch;margin:16px auto 0;color:var(--indigo-100);font-size:1.05rem;line-height:1.7}
.soon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:38px auto 0;max-width:60em;text-align:left}
@media(max-width:820px){.soon-grid{grid-template-columns:1fr}}
.soon-item{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:20px}
.soon-h{font-weight:800;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:8px}
.soon-item p{font-size:.92rem;line-height:1.6;color:var(--indigo-100)}
.soon-foot{margin-top:34px;font-size:.95rem;color:var(--indigo-100);max-width:56ch;margin-left:auto;margin-right:auto}

/* --- Access control section ------------------------------------------- */
.access-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
@media(max-width:900px){.access-grid{grid-template-columns:1fr}}
.access-card{background:#fff;border:1px solid var(--slate-200);border-radius:var(--radius);padding:26px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.access-card h3{font-size:1.03rem;margin-bottom:8px}
.access-card p{font-size:.95rem;line-height:1.65;color:var(--slate-500)}

/* Scrollable table containers are keyboard-focusable (tabindex="0" in the
   markup) so somebody who cannot swipe can still scroll them. That focus has to
   be visible, and the skip link has to appear when it takes focus. */
.matrix-wrap:focus-visible,.price-table-wrap:focus-visible,.cmp-table-wrap:focus-visible,
.fair-table-wrap:focus-visible{outline:3px solid var(--indigo-600);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--indigo-700);color:#fff;
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:700;text-decoration:none}
.skip:focus{left:0}
/* The reveal animation starts elements invisible. If the script fails to run the
   page would be blank, so the hiding is applied only once JS has marked the
   document - the no-JS state is simply the finished state. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal.on{opacity:1;transform:none}
/* ...and reduced motion still wins. The rule above is `.js .reveal` (0,2,0) and
   comes after the `.reveal` inside the reduced-motion block near the top (0,1,0),
   so without this the no-JS fallback silently reinstated the animation for people
   who asked for none: content stayed offset and invisible until scrolled to. */
@media(prefers-reduced-motion:reduce){
  .js .reveal,.js .reveal.on{opacity:1;transform:none;transition:none}
}

/* The two mail addresses are the only links in running prose on this page, and
   the global `a{color:inherit;text-decoration:none}` would render them as
   ordinary text. Underlined, and coloured for the ground each one sits on. */
.faq-note a{color:var(--indigo-600);text-decoration:underline;text-underline-offset:2px}
.faq-note a:hover{color:var(--indigo-700)}
.soon-foot a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.soon-foot a:hover{color:var(--indigo-100)}
.faq-note a:focus-visible,.soon-foot a:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:3px}

/* ---- Guide articles (/guides/, task #74) --------------------------------
   A reading column, deliberately narrower than .wrap: these pages are prose
   rather than the landing page's cards, and a 1120px line length is a wall.
   Everything below reuses the site's own custom properties so a palette
   change reaches the guides too. */
.guide{max-width:760px;padding-top:48px;padding-bottom:64px}
.guide h1{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.02em;margin-bottom:20px}
.guide h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin-bottom:12px}
.guide h3{font-size:1.12rem;font-weight:700;margin:22px 0 8px}
.guide p{margin-bottom:16px}
.guide ul,.guide ol{margin:0 0 18px 22px}
.guide li{margin-bottom:9px}
.guide code{background:var(--slate-100,#f1f5f9);padding:2px 6px;border-radius:6px;font-size:.92em}
.guide a{color:var(--indigo-600,#4f46e5);text-decoration:underline;text-underline-offset:2px}
.guide-section{margin-top:34px}
.guide-table{width:100%;border-collapse:collapse;margin:6px 0 20px;font-size:.95rem;display:block;overflow-x:auto}
.guide-table th,.guide-table td{border:1px solid var(--slate-200,#e2e8f0);padding:8px 12px;text-align:left}
.guide-table th{background:var(--slate-50,#f8fafc);font-weight:700;color:var(--slate-900,#0f172a)}
.guide-note{background:#eef2ff;border:1px solid #c7d2fe;border-radius:var(--radius);padding:16px 18px;margin:18px 0}
.guide-index{list-style:none;margin-left:0}
.guide-index li{margin-bottom:26px}
.guide-index h2{font-size:1.25rem;margin-bottom:6px}
.guide-index a{text-decoration:none;color:var(--slate-900,#0f172a)}
.guide-index a:hover{color:var(--indigo-600,#4f46e5)}