/* ============================================================================
   LoopSuite ad landers — self-contained, mobile-first.
   Palette is the live app's workforce theme (workforce-theme.ts) so the lander
   and the product look like the same thing. Accent is reserved for primary
   actions only; status/trust cues use good/amber.

   Deliberately does NOT load style.css / ds.css / skin.css / theme.css: paid
   traffic is mostly phones, and these pages want the app tokens exactly.
   ========================================================================== */
:root{
  --canvas:#171717;
  --surface:#202020;
  --raised:#292929;
  --text:#F3F4EF;
  --muted:#A7AAA1;
  --accent:#C6FF34;
  --accent-ink:#171717;
  --good:#9ED32A;
  --amber:#E5B04C;
  --hair:rgba(243,244,239,.10);
  --hair-2:rgba(243,244,239,.16);
  --r:14px;
  --r-lg:20px;
  --r-xl:26px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --font:"Geist","Geist Fallback",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--font);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
h1,h2,h3{margin:0;line-height:1.05;letter-spacing:-.03em;font-weight:700}
p{margin:0}
ul,dl,dd,dt{margin:0;padding:0}
li{list-style:none}
a{color:inherit;text-decoration:none}
svg{display:block}
em{font-style:normal;color:var(--text);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:3px;text-decoration-thickness:2px}
::selection{background:rgba(198,255,52,.3);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}

.wrap{width:100%;max-width:940px;margin-inline:auto;padding-inline:20px}

.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:0 0 10px 0;font-weight:600;z-index:50}
.skip:focus{left:0}

/* ---------- Buttons — the only place accent is used ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent);color:var(--accent-ink);
  font-family:inherit;font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:15px 24px;border:0;border-radius:12px;cursor:pointer;text-align:center;
  transition:transform .2s var(--ease),filter .2s var(--ease);
}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:10px 16px;font-size:14.5px;border-radius:10px}
.btn-lg{width:100%;padding:17px 26px;font-size:17px}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- Header ---------- */
.hd{position:sticky;top:0;z-index:20;background:rgba(23,23,23,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.hd-in{display:flex;align-items:center;justify-content:space-between;gap:14px;height:62px}
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:17px;letter-spacing:-.02em}
.logo svg{width:28px;height:28px;border-radius:8px;flex:none}

/* ---------- Hero ---------- */
.hero{padding:44px 0 8px}
.eyebrow{display:inline-block;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
h1{font-size:clamp(34px,8.6vw,58px);letter-spacing:-.04em}
.sub{margin-top:18px;font-size:17.5px;color:var(--muted);max-width:34ch}
.cta{margin-top:28px}
.trial{margin-top:12px;font-size:14.5px;color:var(--muted);text-align:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chips li{font-size:13px;color:var(--muted);border:1px solid var(--hair);border-radius:999px;padding:7px 13px}

/* ---------- Result card ---------- */
.panel{margin-top:36px}
.card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:18px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.status{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:999px;white-space:nowrap}
.status-review{color:var(--amber);background:rgba(229,176,76,.12);border:1px solid rgba(229,176,76,.3)}
.status-working{color:var(--good);background:rgba(158,211,42,.12);border:1px solid rgba(158,211,42,.3)}
.card-title{font-size:19px;margin-bottom:12px}
.lines>div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid var(--hair);font-size:14.5px}
.lines dt{color:var(--muted)}
.lines dd{font-weight:600;white-space:nowrap}
.total{display:flex;justify-content:space-between;align-items:baseline;padding-top:13px;margin-top:2px;border-top:1px solid var(--hair-2)}
.total span{color:var(--muted);font-size:14px}
.total b{font-size:26px;letter-spacing:-.03em}
.ask{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:13px;border:1px solid var(--hair);border-radius:var(--r);background:var(--raised);font-size:14px;color:var(--muted);line-height:1.45}
.ask svg{width:18px;height:18px;flex:none;color:var(--good);margin-top:1px}
.ask b{color:var(--text);font-weight:600}

/* ---------- Steps ---------- */
.steps{display:grid;gap:12px;margin-top:36px}
.step{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px}
.step b{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:9px;background:var(--raised);border:1px solid var(--hair-2);color:var(--text);font-size:13px;font-weight:600;margin-bottom:12px}
.step h3{font-size:17px;margin-bottom:7px}
.step p{font-size:15px;color:var(--muted);line-height:1.5}

/* ---------- Closing CTA ---------- */
.end{margin:44px 0 8px;padding:32px 22px;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);text-align:center}
.end h2{font-size:clamp(23px,5.4vw,32px);margin-bottom:22px;letter-spacing:-.03em}
.fine{margin-top:16px;font-size:13px;color:var(--muted);line-height:1.5}

/* ---------- Footer ---------- */
.ft{margin-top:48px;padding:26px 0 34px;border-top:1px solid var(--hair);font-size:13.5px;color:var(--muted)}
.ft a:hover{color:var(--text)}

/* ---------- Larger screens ---------- */
@media (min-width:720px){
  .hero{padding:64px 0 8px}
  .sub{font-size:19px}
  .btn-lg{width:auto}
  .cta{display:flex;align-items:center;gap:18px}
  .trial{margin-top:0;text-align:left}
  .steps{grid-template-columns:repeat(3,1fr);gap:16px}
  .card{padding:24px}
  .end{padding:44px 34px}
}

/* ============================================================================
   Job pages (/ai-quote-builder, /ai-invoice-follow-up, /ai-enquiry-replies)
   Karl's required structure: painful moment -> before/after -> workflow ->
   what it uses -> what it never guesses -> what waits for approval ->
   a real Result screen -> one conversion action.
   ========================================================================== */
.sec{margin-top:52px}
.sec-h{font-size:clamp(24px,5.6vw,34px);letter-spacing:-.03em;margin-bottom:8px}
.sec-lede{color:var(--muted);font-size:16px;margin-bottom:22px;max-width:56ch}

/* before / after */
.ba{display:grid;gap:12px}
.ba-col{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px}
.ba-col h3{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;font-weight:500}
.ba-col.after{border-color:rgba(198,255,52,.28)}
.ba-col li{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:15px;color:var(--muted);line-height:1.45}
.ba-col li::before{content:"—";color:var(--muted);flex:none}
.ba-col.after li{color:var(--text)}
.ba-col.after li::before{content:"✓";color:var(--good);font-weight:700}

/* numbered workflow */
.flow{counter-reset:s;display:grid;gap:10px}
.flow-i{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px}
.flow-i b{counter-increment:s;flex:none;width:26px;height:26px;border-radius:8px;background:var(--raised);border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:600}
.flow-i b::before{content:counter(s)}
.flow-i p{font-size:15px;line-height:1.5}
.flow-i p strong{display:block;margin-bottom:3px;font-weight:600}
.flow-i p span{color:var(--muted)}

/* two-up fact lists (uses / never guesses) */
.duo{display:grid;gap:12px}
.duo-c{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);padding:20px}
.duo-c h3{font-size:16px;margin-bottom:12px}
.duo-c li{padding:8px 0;font-size:14.5px;color:var(--muted);border-top:1px solid var(--hair);line-height:1.45}
.duo-c li:first-of-type{border-top:0}

/* approval strip */
.gate{background:var(--raised);border:1px solid rgba(198,255,52,.22);border-radius:var(--r-lg);padding:20px}
.gate h3{font-size:16px;margin-bottom:10px}
.gate p{font-size:15px;color:var(--muted);line-height:1.5}
.gate ul{margin-top:12px}
.gate li{display:flex;gap:10px;padding:7px 0;font-size:14.5px;color:var(--text)}
.gate li::before{content:"◆";color:var(--accent);font-size:10px;line-height:1.7;flex:none}

/* stat block (sourced figures only) */
.stats{display:grid;gap:10px;margin-top:6px}
.stat{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:16px 18px}
.stat b{display:block;font-size:26px;letter-spacing:-.03em;color:var(--accent)}
.stat span{font-size:14px;color:var(--muted)}
.src{margin-top:14px;font-size:13px;color:var(--muted)}
.src a{text-decoration:underline;text-underline-offset:3px}
.src a:hover{color:var(--text)}

/* result screen */
.result .card{background:var(--raised)}
.res-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--hair);font-size:14.5px}
.res-row:first-of-type{border-top:0}
.res-row .nm{color:var(--text)}
.res-row .mt{color:var(--muted);font-size:13px}
.status-needs{color:var(--amber);background:rgba(229,176,76,.12);border:1px solid rgba(229,176,76,.3)}
.status-finished{color:var(--good);background:rgba(158,211,42,.12);border:1px solid rgba(158,211,42,.3)}
.status-on{color:var(--muted);background:rgba(243,244,239,.06);border:1px solid var(--hair)}

@media (min-width:720px){
  .ba{grid-template-columns:1fr 1fr;gap:16px}
  .duo{grid-template-columns:1fr 1fr;gap:16px}
  .stats{grid-template-columns:repeat(4,1fr)}
  .sec{margin-top:72px}
}

/* ---------- Consent banner ----------
   consent.js paints the banner with inline light styles. These pages don't
   load theme.css, so re-tint it here. :has() targets the fixed container,
   which consent.js creates without an id or class. */
body > div:has(> div > #lsc-accept){
  background:var(--surface) !important;
  border:1px solid var(--hair) !important;
  color:var(--text) !important;
  box-shadow:0 20px 50px -22px rgba(0,0,0,.85) !important;
}
body > div:has(> div > #lsc-accept) p,
body > div:has(> div > #lsc-accept) span,
body > div:has(> div > #lsc-accept) div{color:var(--muted) !important}
body > div:has(> div > #lsc-accept) a{color:var(--accent) !important}
#lsc-accept{background:var(--accent) !important;color:var(--accent-ink) !important}
#lsc-decline{background:transparent !important;color:var(--muted) !important;border:1px solid var(--hair-2) !important}

/* ============================================================================
   Cross-app flow — reads from one app, uses your info, acts in another.
   ========================================================================== */
.flowframe{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-xl);padding:24px 18px;margin-top:24px}
.flowframe + .flowframe{margin-top:14px}
.flow-title{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
/* Scoped to .flowframe: `.flow` is also the numbered-workflow list on the job
   pages (see "numbered workflow" above). Unscoped, this block won the cascade
   fight and turned those lists into a broken 5-column grid at 760px. */
.flowframe .flow{display:grid;gap:0;position:relative}
.node{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0;z-index:2}
.tiles{display:flex;align-items:center;justify-content:center}
.tile{width:54px;height:54px;border-radius:50%;background:var(--raised);border:2px solid #292929;box-shadow:0 8px 20px -8px rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;flex:none}
.tile + .tile{margin-left:-14px}
.tile svg{width:26px;height:26px}
.tile.doc{background:#1b1b1b}
.node.mid .tile{width:64px;height:64px;background:#1a1f0d;border-color:rgba(198,255,52,.45)}
.node.mid .tile svg{width:32px;height:32px}
.node .lbl{margin-top:10px;font-size:12.5px;color:var(--muted);max-width:16ch;line-height:1.35}
.node .who{margin-top:2px;font-size:12px;color:var(--text);font-weight:600;max-width:18ch}
/* connector */
.conn{position:relative;height:34px;display:flex;align-items:center;justify-content:center}
.conn::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--hair-2)}
.conn::after{content:"";position:absolute;left:50%;top:0;width:2px;height:0;transform:translateX(-50%);background:var(--accent);transition:height .7s var(--ease)}
.flowframe .flow.go .conn::after{height:100%}
.flowframe .flow.go .conn:nth-of-type(2)::after{transition-delay:.25s}
.flow-cap{margin-top:20px;font-size:14.5px;color:var(--muted);line-height:1.55;text-align:center}
.flow-cap b{color:var(--text);font-weight:600}
@media (min-width:760px){
  .flowframe .flow{grid-template-columns:1fr minmax(56px,.8fr) 1fr minmax(56px,.8fr) 1fr;align-items:start}
  .conn{height:auto;width:100%;min-width:56px;margin-top:26px}
  .conn::before{left:0;right:0;top:50%;bottom:auto;width:auto;height:2px;transform:translateY(-50%)}
  .conn::after{left:0;top:50%;width:0;height:2px;transform:translateY(-50%);transition:width .7s var(--ease)}
  .flow.go .conn::after{width:100%;height:2px}
}
@media (prefers-reduced-motion:reduce){
  .conn::after{transition:none!important;height:100%!important}
  @media (min-width:760px){.conn::after{width:100%!important;height:2px!important}}
}


/* ============================================================================
   Lander v2 — built to be understood by SCANNING, not reading.
   Shape: H1 (the ad's promise) -> one-line sub -> CTA -> phone proof ->
   cross-app flow -> 3 trust bullets -> repeat CTA. ~150 words a page.

   Every visitor here costs money, so the CTA must clear the fold on a phone:
   the mockup deliberately sits BELOW the copy on mobile and only moves
   alongside it from 900px up.
   ========================================================================== */
.hero-2{padding:34px 0 8px}
.hero-2 h1{max-width:15ch}
.hero-2 .sub{margin-top:14px;max-width:38ch}
.hero-2 .cta{margin-top:22px}
/* The job names are long ("Hire Customer Enquiries & Bookings"), and a primary
   CTA that wraps mid-name reads as broken. Never let flex shrink it. */
.hero-2 .cta .btn{flex:none}
.hero-grid{display:grid;gap:34px;align-items:center}
@media (min-width:900px){
  .hero-2{padding:56px 0 8px}
  .hero-grid{grid-template-columns:1.04fr .96fr;gap:52px}
  .hero-2 .cta{flex-wrap:wrap;gap:14px 18px}
  .hero-2 .cta .trial{flex:1 1 100%;margin-top:0}
}

/* ---------- The phone: the real app screen, drawn rather than screenshotted.
   No app screenshots exist in /assets/screenshots (the directory is empty), so
   this is built from the app's own tokens and its real UI words: Hire, and the
   statuses On / Paused / Needs you / Working now. Swap in a real capture when
   there is one — keep the class names and it drops straight in. ---------- */
.phone{
  width:100%;max-width:300px;margin-inline:auto;
  background:#0d0d0d;border:1px solid var(--hair-2);border-radius:40px;padding:8px;
  box-shadow:0 44px 84px -44px rgba(0,0,0,.95);
}
.scr{border-radius:33px;overflow:hidden;background:var(--canvas);display:flex;flex-direction:column}
/* Wraps deliberately: the official job names are long ("Customer Enquiries &
   Bookings", "Social Content Publisher") and must never be ellipsised into
   something that reads like a different job, so the status pill drops to its
   own line rather than squeezing the name. */
.scr-top{
  display:flex;align-items:center;justify-content:space-between;gap:6px 8px;flex-wrap:wrap;
  padding:20px 13px 13px;border-bottom:1px solid var(--hair);background:var(--surface);
}
.scr-emp{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;letter-spacing:-.02em;flex:1 1 auto}
.scr-emp svg{width:20px;height:20px;border-radius:6px;flex:none}
.scr-emp span{line-height:1.25}
.pill{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap;flex:none}
.pill-needs{color:var(--amber);background:rgba(229,176,76,.13);border:1px solid rgba(229,176,76,.32)}
.pill-working{color:var(--good);background:rgba(158,211,42,.13);border:1px solid rgba(158,211,42,.32)}
.pill-paused{color:var(--muted);background:rgba(243,244,239,.06);border:1px solid var(--hair-2)}
.scr-body{padding:14px 14px 12px;display:grid;gap:11px}
.scr-card{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);padding:13px}
.scr-card-h{font-size:13.5px;font-weight:600;letter-spacing:-.01em;margin-bottom:9px}
.scr-ln{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:6px 0;border-top:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.scr-ln:first-of-type{border-top:0}
.scr-ln b{color:var(--text);font-weight:600;white-space:nowrap}
.scr-tot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:6px;padding-top:9px;border-top:1px solid var(--hair-2);font-size:12px;color:var(--muted)}
.scr-tot b{font-size:19px;color:var(--text);letter-spacing:-.03em}
.scr-note{
  display:flex;gap:8px;align-items:flex-start;
  background:var(--raised);border:1px solid var(--hair);border-radius:var(--r);
  padding:10px 11px;font-size:11.5px;line-height:1.4;color:var(--muted);
}
.scr-note svg{width:14px;height:14px;flex:none;margin-top:1px;color:var(--good)}
.scr-note b{color:var(--text);font-weight:600}
.scr-act{display:flex;gap:8px;padding:0 14px 16px}
.scr-b2{flex:none;padding:10px 14px;border-radius:11px;background:var(--raised);border:1px solid var(--hair-2);font-size:12.5px;font-weight:600;color:var(--text)}
.scr-b1{flex:1;text-align:center;padding:10px;border-radius:11px;background:var(--accent);color:var(--accent-ink);font-size:12.5px;font-weight:700}
.shot-cap{margin-top:13px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---------- 3 trust bullets — the whole trust argument, scannable ---------- */
.trust3{display:grid;gap:10px;margin-top:34px}
.trust3 li{
  display:flex;gap:11px;align-items:center;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);
  padding:14px 16px;font-size:14.5px;line-height:1.35;
}
.trust3 svg{width:19px;height:19px;flex:none;color:var(--accent)}
@media (min-width:720px){.trust3{grid-template-columns:repeat(3,1fr);gap:12px}}

/* ---------- Section label above the cross-app flow ---------- */
.mini-h{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;margin-top:52px}

/* ---------- CTA variants — the three /go/ social landers are a live A/B test
   on the CTA treatment, so all three shapes have to keep working. ---------- */
.cta-apps{display:grid;gap:10px}
@media (min-width:560px){.cta-apps{grid-template-columns:1fr 1fr}}
.cta-web{display:inline-block;font-size:14.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.cta-web:hover{color:var(--text)}

/* ============================================================================
   Real app captures — /assets/screenshots/*.png
   These are true iPhone captures of the shipping app, 900x1956 each. They
   replace the drawn mockups: on a sales call a real screen carries weight a
   CSS drawing never will.

   How they are framed:
   - the picture is laid into the bezel at its full width with height:auto, so
     it is only ever scaled uniformly — it is never stretched or squashed;
   - the screen box has a fixed aspect-ratio and clips, so whatever falls past
     the bottom of the frame simply bleeds off, exactly the way the drawn
     mockups behaved. The meaningful part of every screen is its top;
   - width/height on the <img> are the intrinsic pixels and the frame reserves
     its own box from aspect-ratio, so nothing moves when the image lands
     (no layout shift, lazy or not).
   Colours are written literally rather than as tokens because this block is
   shared verbatim by home.css, site.css and lander.css.
   ========================================================================= */
.appshot{margin:0 auto;width:100%;max-width:292px}
.appshot-fr{
  background:#0d0d0d;border:1px solid rgba(243,244,239,.13);
  border-radius:38px;padding:9px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.92);
}
.appshot-scr{
  position:relative;overflow:hidden;
  border-radius:30px;background:#171717;
  aspect-ratio:9/17;
}
.appshot-scr img{display:block;width:100%;height:auto;border:0}

/* Some screens say everything they need to in their top half. Those get a
   shorter frame, open at the bottom, so it reads as the top of a phone
   deliberately cropped rather than as a stubby device. */
.appshot--short .appshot-fr{
  padding-bottom:0;border-bottom:0;
  border-bottom-left-radius:17px;border-bottom-right-radius:17px;
}
.appshot--short .appshot-scr{
  aspect-ratio:45/57;
  border-bottom-left-radius:13px;border-bottom-right-radius:13px;
}

.appshot-cap{
  margin:13px auto 0;max-width:34ch;
  text-align:center;font-size:13px;line-height:1.5;color:#A7AAA1;
}
.appshot-cap b{color:#F3F4EF;font-weight:600}

/* Two or three captures in a row. Single column on a phone — these are tall
   pictures and side-by-side would shrink them to nothing. */
.shotrow{display:grid;gap:36px;margin-top:38px;justify-items:center}
@media (min-width:760px){
  .shotrow{grid-template-columns:repeat(2,1fr);gap:28px;align-items:start}
  .shotrow--3{grid-template-columns:repeat(3,1fr);gap:22px}
}