/* Saudaflow Circle Registry — public page styles (owner A-pages). One file, content-hashed, shared by every page.
   D-833 Addendum A4 (15/11/2026): ONE dark theme, the marketing site's own look. Ground ink #0A0613 with one plum
   radial (#332560) top right; cards one step above the ground with hairline borders and 12–16 px radii; text
   #F4F1FA, secondary #C9C2DD / #ADA6C2; ONE accent, gold #F5C56B — the primary button, links, focus. Every token and
   recipe is copied from the site (apps/marketing-pricing/index.html, apps/marketing-blog/assets/blog.css and its
   graphics/README.md); nothing here invents a colour. Geist: headings, numbers, the wordmark. Inter: text.
   Semantic colours only for meaning: mint = registered, saffron = renewal due, coral = a refused field and, in
   .rera-line__quoted alone, the Authority's own revoked / suspended / cancelled word (§4b).
   The company colour exists only as --sf-company, read by exactly three rules: .cover--company, .logo-tile--company,
   .card--company-rule (D-788). Motion only on a state change, 150 ms, and none under prefers-reduced-motion. */

@font-face{font-family:"Geist";src:url(fonts/geist-var-latin.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Geist Fallback";src:local("Arial");ascent-override:94.56%;descent-override:27.76%;line-gap-override:0%;size-adjust:106.28%}
@font-face{font-family:"InterVariable";src:url(fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-display:optional}

:root{
  color-scheme:dark;
  --bg:#0a0613;--panel:#140a24;--panel-2:#1e1335;--glow:#332560;
  --line:rgba(245,197,107,.14);--line-soft:rgba(255,255,255,.08);--line-strong:rgba(245,197,107,.32);
  --ink:#f4f1fa;--ink-2:#c9c2dd;--muted:#ada6c2;
  --accent:#f5c56b;--accent-hover:#ffd896;--on-accent:#0a0613;--focus:#f5c56b;
  --gold-fill:linear-gradient(120deg,#ffd896,#f5c56b 50%,#d9a24a);--gold-wash:linear-gradient(to bottom right,rgba(245,197,107,.09),rgba(245,197,107,.01));
  --ok-bg:rgba(93,202,165,.13);--ok-ink:#5dcaa5;--warn-bg:rgba(255,138,61,.13);--warn-ink:#ff8a3d;--neu-bg:rgba(255,255,255,.07);--neu-ink:#c9c2dd;--danger-ink:#ff9b8a;
  --sh:0 16px 40px -24px rgba(0,0,0,.75);--sh-gold:0 8px 24px -8px rgba(245,197,107,.55);
  --r-12:12px;--r-16:16px;
  --font-brand:"Geist","Geist Fallback","InterVariable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-ui:"InterVariable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
/* paper (R2 S3-5): the tokens take paper values — dark text on white; the site's own calls to action are not printed */
@media print{
:root{--bg:#fff;--panel:#fff;--panel-2:#fff;--glow:#fff;--line:#ccc;--line-soft:#ddd;--line-strong:#999;--ink:#000;--ink-2:#000;--muted:#333;--accent:#000;--ok-ink:#000;--warn-ink:#000;--neu-ink:#000;--danger-ink:#000;--sh:none}
.site__nav,.crmband,.card--crm,.actionbar{display:none!important}
.logo-tile{background:none!important}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
@media (prefers-reduced-motion: no-preference){html{scroll-behavior:smooth}}
body{margin:0;min-height:100vh;background:var(--bg) radial-gradient(min(64rem,130vw) 34rem at 100% 0,var(--glow),transparent 72%) no-repeat;color:var(--ink);font:400 16px/1.55 var(--font-ui);font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
@media (min-width:640px){body{font-size:15px}}
h1,h2,h3{font-family:var(--font-brand);color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.2}
h1{font-size:24px;font-weight:600}
h2{font-size:18px;font-weight:600;letter-spacing:-.015em}
h3{font-size:15px;font-weight:600;letter-spacing:-.01em;margin-top:16px}
@media (min-width:640px){h1{font-size:30px}}
p{margin:8px 0 0}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
::selection{background:rgba(245,197,107,.32);color:var(--ink)}
img{max-width:100%;height:auto}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-3px}
.icon--sm{width:14px;height:14px;vertical-align:-2px}
.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}
.sr-only+p{margin-top:0}
.skip{position:absolute;left:8px;top:-56px;z-index:20;background:var(--panel-2);color:var(--ink);padding:8px 12px;border-radius:8px;border:1px solid var(--line-strong)}
.skip:focus{top:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 16px}
@media (min-width:640px){.wrap{padding:0 24px}}
.num,.money,time{font-variant-numeric:tabular-nums}
.strong{font-weight:600;color:var(--ink)}
.small{font-size:13px;color:var(--muted)}
.muted{color:var(--muted)}
.lead{font-size:16px;color:var(--ink-2)}
.hinglish{font-size:13px;color:var(--muted)}

/* site bar — the marketing header's look: the gold mark, the wordmark ("Sauda" 600 + "flow" 400), a hairline, "Circle"
   in type (D-792), quiet links, the gold demo button. Measured in Chrome with Geist + Inter (lockup 196 px, button
   110 px; 127 px from 640 px, where it takes the site's own size): one row holds both from 346 px, + "Saudaflow CRM"
   from 520 px, + "About" from 640 px; narrower than 346 px the button wraps under the lockup — the bar may wrap,
   nothing ever scrolls sideways. Both links are in the footer too. */
.site{border-bottom:1px solid rgba(245,197,107,.1)}
.site__in{display:flex;align-items:center;gap:8px 16px;min-height:64px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.lockup,.foot__lockup{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.lockup:hover{text-decoration:none;color:var(--ink)}
.sf-mark{display:inline-block;flex:0 0 auto}
.wordmark{font-family:var(--font-brand);font-size:19px;letter-spacing:-.035em;line-height:1;color:var(--ink)}
.wm-a{font-weight:600}.wm-b{font-weight:400}
.lockup__rule{width:1px;height:18px;background:var(--line-strong)}
.lockup__circle{font-family:var(--font-brand);font-size:17px;font-weight:500;color:var(--ink-2);letter-spacing:-.01em;line-height:1}
.site__nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.site__nav a:not(.btn){color:var(--ink-2);font-size:14px;padding:10px 12px;border-radius:8px}
.site__nav a:not(.btn):hover{color:var(--ink);text-decoration:none}
.site__nav .site__cta{min-height:40px;margin-left:8px;padding:0 16px;white-space:nowrap}
@media (min-width:640px){.site__nav .site__cta{min-height:46px;padding:0 22px}}
@media (max-width:639px){.site__nav a:first-child{display:none}}
@media (max-width:519px){.site__in{gap:8px}.site__nav a:not(.site__cta){display:none}.site__nav .site__cta{margin-left:0}}
.crumbs ol{list-style:none;margin:0;padding:16px 0 0;display:flex;flex-wrap:wrap;gap:4px 8px;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"›";margin-right:8px;opacity:.6}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.crumbs [aria-current]{color:var(--ink-2)}
/* a phone keeps the trail on one line and lets it scroll sideways inside itself — never three wrapped rows above the name */
@media (max-width:639px){.crumbs ol{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none}.crumbs ol::-webkit-scrollbar{display:none}}

/* cards — one step above the ground, hairline border, one elevation */
.profile{margin-top:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-16);box-shadow:var(--sh);padding:16px;color:var(--ink-2)}
@media (min-width:640px){.card{padding:24px}}
.card--raised{border-color:var(--line-strong)}
.card--quiet{padding:16px 20px;background:none;box-shadow:none}
.card--company-rule{border-top:4px solid var(--sf-company)}
.card__head{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.card__sub{margin:0;font-size:13px;color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:16px}
.layout__main,.rail{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;min-width:0}
@media (min-width:1024px){.layout{grid-template-columns:minmax(0,1fr) 340px;gap:24px;margin-top:24px}.layout__main,.rail{gap:24px}}

/* the hero card: [cover — claimed only] · monogram or logo tile · name + chips · the RERA line · the fact strip */
.phead{padding:0;overflow:hidden}
.cover{position:relative;height:96px;background:var(--panel-2)}
@media (min-width:640px){.cover{height:128px}}
.cover--company{background:var(--sf-company)}
.cover--company::after{content:"";position:absolute;inset:0;background:rgba(10,6,19,.35)}
.cover__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phead__body{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:flex-start;padding:20px 16px 16px}
@media (min-width:640px){.phead__body{padding:28px 28px 20px}}
.logo-tile{position:relative;z-index:1;width:72px;height:72px;border-radius:16px;background:var(--ink);border:1px solid var(--line-strong);display:flex;align-items:center;justify-content:center;flex:0 0 auto;overflow:hidden}
@media (min-width:640px){.logo-tile{width:88px;height:88px}}
.phead--cover .logo-tile{margin-top:-56px}
@media (min-width:640px){.phead--cover .logo-tile{margin-top:-72px}}
.logo-tile--initials{font-family:var(--font-brand);font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--ink);background:linear-gradient(140deg,var(--glow),var(--panel-2))}
@media (min-width:640px){.logo-tile--initials{font-size:32px}}
.logo-tile--company{background:var(--sf-company)}
.logo-tile__img{width:80%;height:80%;object-fit:contain}
.logo-tile--sm{width:40px;height:40px;margin:0;border-radius:var(--r-12);font-size:14px;border-color:var(--line)}
.phead__id{flex:1 1 480px;min-width:0}
.phead__eyebrow{margin:0 0 4px;font-size:13px;color:var(--muted)}
.phead__title{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.phead__meta{margin:6px 0 0;color:var(--ink-2)}
.phead__lines{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:16px}
.phead__lines::after{content:"";order:3;flex-basis:100%}
.phead__lines .rera-line,.phead__chips{display:contents}
.phead__lines .rera-line__chip{order:1}
.phead__lines .chip--rollup{order:2}
.phead__lines .src{order:4;margin:0}
.phead__lines .rera-line__link{order:5;font-size:12.5px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--line-soft)}
.stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:2px;margin:0;padding:14px 16px;min-width:0}
.stat:nth-child(even){border-left:1px solid var(--line-soft)}
.stat:nth-child(n+3){border-top:1px solid var(--line-soft)}
.stat dt{font-size:12.5px;color:var(--muted)}
.stat dd{margin:0;font:600 19px/1.25 var(--font-brand);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
/* three cells (R2 S3-2): on a phone the third takes the whole second row */
@media (max-width:639px){.stat:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:640px){
  .stats{grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column}
  .stat{padding:18px 28px}
  .stat:nth-child(n+3){border-top:0}
  .stat+.stat{border-left:1px solid var(--line-soft)}
  .stat dd{font-size:22px}
}
.hero{padding:0;overflow:hidden}
.hero>h1,.hero>p{margin-left:16px;margin-right:16px}
.hero>h1{margin-top:20px}
.hero>.answer{max-width:74ch}
.hero>.stats{margin-top:20px}
.hero>.src{margin-top:0;padding:12px 0 14px;border-top:1px solid var(--line-soft)}
.hero>.hub__area{color:var(--muted);font-size:14px}
@media (min-width:640px){.hero>h1,.hero>p{margin-left:28px;margin-right:28px}.hero>h1{margin-top:28px}.hero>.stats{margin-top:24px}}
.tabs{display:flex;gap:4px;padding:0 12px;border-top:1px solid var(--line-soft);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs__link{flex:0 0 auto;color:var(--ink-2);font-weight:500;font-size:14px;padding:13px 12px;white-space:nowrap}
.tabs__link:hover{text-decoration:none;color:var(--ink)}
.tabs__link[aria-current="true"]{color:var(--accent);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)}
.tabs__link:focus-visible{outline-offset:-2px}
.tabs--card{border-top:0;padding:0;margin-top:16px;flex-wrap:wrap}
.hhead h1+p,.hhead .answer{margin-top:10px}

/* chips, badge, RERA line — words + icon, never colour alone (§4b) */
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:var(--neu-bg);color:var(--neu-ink);line-height:1.35}
.chip--success{background:var(--ok-bg);color:var(--ok-ink)}
.chip--warning{background:var(--warn-bg);color:var(--warn-ink)}
.chip--unclaimed,.chip--planned{background:none;border:1px dashed rgba(201,194,221,.5)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink);font-size:12.5px;font-weight:600;background:rgba(245,197,107,.08)}
.badge .icon{color:var(--accent)}
.badge--lg{font-size:14px;padding:6px 12px;margin-top:12px}
.rera-line{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:12px 0 0;font-size:13.5px;font-weight:500}
.rera-line__chip{display:inline-flex;align-items:flex-start;gap:8px;padding:6px 12px;border-radius:var(--r-12);background:var(--neu-bg);color:var(--neu-ink);overflow-wrap:anywhere;min-width:0}
.rera-line__chip .icon{margin-top:1px}
.rera-line--success .rera-line__chip{background:var(--ok-bg);color:var(--ok-ink)}
.rera-line--warning .rera-line__chip{background:var(--warn-bg);color:var(--warn-ink)}
.rera-line__link{white-space:nowrap;font-weight:600}
.rera-line__quoted{quotes:none;color:var(--danger-ink);font-weight:700}
q.status-quoted,q.record__quote{quotes:none;font-style:normal}
.src{margin:16px 0 0;font-size:12.5px;color:var(--muted)}

/* notice and banners — not dismissible, not sticky */
.notice{display:flex;gap:12px;align-items:flex-start;margin:0 16px 16px;padding:14px 16px;border-radius:var(--r-12);background:var(--panel-2);border:1px solid var(--line-soft);font-size:14px;line-height:1.6;color:var(--ink-2)}
@media (min-width:640px){.notice{margin:0 28px 20px}}
.stats+.notice{margin-top:16px}
.notice__icon{margin-top:3px;color:var(--accent)}
.notice__body{min-width:0}
.notice__body p{margin:0 0 6px}
.notice__body p:first-child{color:var(--ink);font-weight:500}
.notice__body p:last-child{margin:0}
.notice .url,.foot__prov .url{overflow-wrap:anywhere}
.stale{display:flex;gap:8px;align-items:center;margin:16px 0 0;padding:10px 14px;border-radius:var(--r-12);background:var(--warn-bg);color:var(--warn-ink);font-weight:500}
.empty{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding:16px;border:1px dashed var(--line-strong);border-radius:var(--r-12);color:var(--ink-2)}
.empty p{margin:0}
.note{font-size:13px;color:var(--muted)}

/* overview */
.answer{font-size:15px;line-height:1.65;color:var(--ink-2);margin-top:10px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px;margin:20px 0 0}
.fact{margin:0}
.facts dt{font-size:12.5px;color:var(--muted)}
.facts dd{margin:2px 0 0;font:600 15px/1.4 var(--font-brand);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--ink);overflow-wrap:anywhere}
.sbc{font-weight:400;color:var(--muted)}

/* lists — rows in the card's own language: a hairline between, the name first, the status as a chip */
.plist,.records,.mlist,.team,.contact,.links,.ticks,.steps,.chips,.nextlist,.lsteps{list-style:none;margin:12px 0 0;padding:0}
.prow,.mrow{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:14px 0;border-top:1px solid var(--line-soft)}
.prow__main,.mrow__main{flex:1 1 260px;min-width:0}
.prow__name,.mrow__name{font-size:15px;font-weight:600;color:var(--ink)}
a.prow__name:hover,.mrow__name:hover{color:var(--accent)}
.prow__meta,.prow__facts,.mrow__meta{margin:2px 0 0;font-size:13px;color:var(--muted)}
.prow .num,.mrow .num{white-space:nowrap}
.prow__status{display:flex;flex-direction:column;align-items:flex-start;gap:4px;flex:0 1 auto}
.prow__published{font-size:12.5px;color:var(--muted)}
.mrow{align-items:flex-start}
@media (max-width:639px){.mrow .chip{margin-left:56px}}
.mrow__rera{margin:4px 0 0;font-size:12.5px;color:var(--neu-ink)}
.mrow__rera--success{color:var(--ok-ink)}.mrow__rera--warning{color:var(--warn-ink)}
.record{padding:12px 0;border-top:1px solid var(--line-soft)}
.record__line{margin:0;font-weight:600;color:var(--ink)}
.record__title,.record__meta{margin:4px 0 0;font-size:13.5px;color:var(--ink-2)}
.record__reply{margin:6px 0 0;padding:8px 12px;border-left:3px solid var(--line-strong);background:var(--panel-2);font-size:13.5px}
.table-wrap{margin-top:14px;overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-12)}
.regs{width:100%;min-width:600px;border-collapse:collapse;font-size:14px}
.regs th{background:var(--panel-2);color:var(--muted);font-size:12.5px;font-weight:500;text-align:left;padding:10px 14px}
.regs td{padding:12px 14px;border-top:1px solid var(--line-soft);vertical-align:top;color:var(--ink-2)}
.regs td.num,.regs td:last-child a{white-space:nowrap}
.regs td.num{font-family:var(--font-brand);font-variant-numeric:tabular-nums}
/* a phone reads the registrations as rows, not as a table scrolled sideways: the number, the register link beside it,
   then the rest on one quiet line, each value after its column's own name (`data-th`) */
@media (max-width:639px){
  .table-wrap{border:0;overflow:visible}
  .regs,.regs tbody{display:block;min-width:0}
  .regs thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .regs tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-top:1px solid var(--line-soft)}
  .regs td{display:block;grid-column:1/-1;padding:0;border:0;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
  .regs td:first-child{grid-column:1;font-size:15px}
  .regs td:last-child{grid-column:2;grid-row:1;align-self:center}
  .regs td[data-th]::before{content:attr(data-th) " "}
}
.links li{padding:6px 0}
.links--stacked li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line-soft)}
.ticks li{display:flex;gap:10px;align-items:flex-start;padding:4px 0;font-size:14px;color:var(--ink-2)}
.ticks--plain li{display:list-item;margin-left:18px;list-style:disc}
.ticks--plain li::marker{color:var(--accent)}
.icon--ok{color:var(--ok-ink);margin-top:2px}
.steps li{padding:10px 0;border-top:1px solid var(--line-soft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.contact li,.loc,.sfc{display:flex;gap:12px;align-items:flex-start;padding:8px 0}
.contact .icon,.loc .icon{margin-top:3px;color:var(--muted)}
.loc p,.contact p,.sfc p{margin:0}
.sfc p+p{margin-top:6px}
.sfc{padding:0}
.sfc .sf-mark{margin-top:1px}
.team li{padding:10px 0;border-top:1px solid var(--line-soft)}
.team p{margin:0}
.update{padding:14px 0;border-top:1px solid var(--line-soft)}
.update__meta{margin:0;font-size:13px;color:var(--muted);display:flex;gap:8px;align-items:center}
.update__text{margin:6px 0 0;color:var(--ink-2)}
.pager{display:flex;justify-content:space-between;margin-top:12px}
.prose p{max-width:68ch;color:var(--ink-2)}

/* buttons — gold is the one filled button. .btn--glow is the site's own call to action (demo: bar, band, landing),
   as saudaflow.in draws it; a page's own primary (claim, WhatsApp, a form's submit) is the same gold, without the glow.
   On a company, project or person page the site's demo buttons are .btn--secondary (R2 S2-1).
   The company colour never touches a button (D-788). */
.actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--r-12);font:600 14px/1 var(--font-ui);letter-spacing:-.01em;cursor:pointer;text-decoration:none;border:1px solid transparent;transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease}
.btn:hover{text-decoration:none}
.btn--primary{background:var(--gold-fill);color:var(--on-accent);border-color:rgba(255,216,150,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(165,119,48,.5)}
.btn--primary:hover{background:linear-gradient(120deg,#ffe9b8,#ffd896 50%,#f5c56b);color:var(--on-accent)}
.btn--glow{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(165,119,48,.5),var(--sh-gold)}
/* from 640 px Saudaflow's own buttons take saudaflow.in's exact metrics (.btn-primary: 500 / 15 px, 22 px sides), gold or outlined */
@media (min-width:640px){.btn--glow,.site__cta,.crmband .btn{font-weight:500;font-size:15px;padding:0 22px;min-height:46px}}
.btn--secondary{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-strong)}
.btn--secondary:hover{color:var(--ink);background:rgba(255,255,255,.08);border-color:rgba(245,197,107,.55)}
.btn--icon{width:48px;padding:0}
.btn--block{width:100%;margin-top:16px}
.btn[disabled]{opacity:.6;cursor:progress}
.btn:focus-visible{outline-offset:3px;border-radius:var(--r-12)}
/* enhance.js adds html.js first thing (PG-9): without it — no JS, a blocked or failed script — JSON forms hide and the address line shows. */
html:not(.js) [data-requires-js]{display:none!important}html.js [data-no-js]{display:none}[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

/* mobile: one sticky bottom bar (primary + up to two icon buttons), thumb zone; the header row hides there */
.actionbar{display:none}
@media (max-width:767px){
  .phead .actions{display:none}
  .actionbar{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:10;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line-strong);box-shadow:0 -12px 32px rgba(0,0,0,.5)}
  .actionbar .btn--primary{flex:1;min-height:48px;font-size:15px}
  .actionbar .btn--icon{min-height:48px}
  body.has-bar{padding-bottom:88px}
}

/* forms */
.form{display:grid;gap:14px;margin-top:12px}
.field{display:grid;gap:6px;font-size:14px;font-weight:500;color:var(--ink-2)}
/* a field's border: ≥ 3:1 against the card and against its own fill (R2 S2-7) */
.field input,.field textarea,.field select{font:inherit;font-size:16px;color:var(--ink);background:rgba(255,255,255,.04);border:1px solid rgba(245,197,107,.5);border-radius:var(--r-12);padding:10px 12px;min-height:44px}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline-offset:0;border-color:var(--accent);border-radius:var(--r-12)}
.check,.choice{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)}
.check input,.choice input{flex:0 0 18px;margin:3px 0 0;width:18px;height:18px;accent-color:var(--accent)}
.choices{border:0;margin:0;padding:0;display:grid;gap:10px}
.choices legend{font-weight:600;color:var(--ink);margin-bottom:6px}
.choice>span{display:grid;gap:2px}
.form__msg{margin:0;font-weight:500;color:var(--ink)}
.form__msg:empty{display:none}
.form__msg[data-tone="error"]{color:var(--danger-ink)}
/* round 2: a field the API refused, the busy button, the e-mail-code step, its done line, the stop page, the GB Nagar line.
   Semantic colours only for meaning (coral = a refused field; saffron = an undelivered code; mint = done). */
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--danger-ink);box-shadow:0 0 0 1px var(--danger-ink)}
.btn[aria-busy="true"]::after{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sf-spin .7s linear infinite}
@keyframes sf-spin{to{transform:rotate(360deg)}}
.codestep{margin-top:12px;padding-top:4px}
.codestep__h{margin:0;font-size:16px}
.codestep__sent{margin:6px 0 0;color:var(--ink-2)}
.codestep .small{margin:4px 0 0}
.codeinput{max-width:12ch;letter-spacing:.3em;font-variant-numeric:tabular-nums;font-weight:600}
.codestep__more{display:flex;flex-wrap:wrap;gap:4px 20px;margin:0}
.linkbtn{min-height:44px;padding:0;border:0;background:none;font:500 14px/1.2 var(--font-ui);color:var(--accent);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkbtn[disabled]{color:var(--muted);text-decoration:none;cursor:default}
.done{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:14px 16px;border-radius:var(--r-12);background:var(--ok-bg);color:var(--ok-ink);font-weight:600}
.done:focus{outline:none}.done:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.done .icon{margin-top:2px;flex:0 0 auto}
.done__line{margin:0}
/* the claim's method step: one bordered choice per way the API offers; the chosen one takes the accent edge (a state,
   not decoration); a way's own field shows under it only while it is chosen — without :has() support the rule drops and
   the field simply stays shown (still works). Empty status slots take no space. */
.method{margin-top:12px}
.method:focus{outline:none}.method:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-radius:var(--r-12)}
.method [data-slot]:empty{display:none}
.method__state{margin:0 0 10px;font-size:16px;font-weight:600;color:var(--ink)}
.method__opt{display:grid;gap:10px;padding:12px 14px;border:1px solid var(--line-soft);border-radius:var(--r-12);background:rgba(255,255,255,.03)}
.method__opt:has(input[name="method"]:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.method__opt:not(:has(input[name="method"]:checked)) .method__sub{display:none}
.method__opt[data-unavailable]{border-style:dashed;background:none}.method__opt[data-unavailable] .method__sub{display:none}
.method__why{color:var(--ink);font-weight:500}
.profile--narrow{max-width:640px;margin:40px auto 0}
.stop h1{margin:0}
.stopbox{display:grid;gap:12px;justify-items:start;margin-top:20px}
.hub__area{margin:8px 0 0;color:var(--ink-2)}

/* D-833 (A5): Saudaflow's own calls to action — never the listed company's. The side card (company and hub pages)
   shows from 1024 px, where the rail sits beside the page; on a phone the band above the footer says the same once. */
.card--crm{display:none;background:var(--gold-wash),var(--panel);border-color:var(--line-strong)}
@media (min-width:1024px){.card--crm{display:block}}
.crmcard__act{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:16px 0 0;font-size:13.5px;font-weight:500}
.crmcard__act .btn{min-height:40px;padding:0 14px}
.crmband{margin-top:48px}
.crmband__in{display:grid;gap:20px;padding:24px 20px;border-radius:var(--r-16);border:1px solid var(--line-strong);background:var(--gold-wash),var(--panel)}
.crmband__text{max-width:68ch}
.crmband__text h2{font-size:22px;font-weight:500;letter-spacing:-.03em}
.crmband__body{color:var(--ink-2)}
.crmband__own{margin-top:10px;text-wrap:balance}
.crmband__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:0;font-size:14px;font-weight:500}
@media (min-width:768px){.crmband__in{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:32px;padding:32px 36px}}

/* the /circle/ landing (D-833 P3, P6e): hero · what you can do today · opening next · the lists · how · FAQ · policy */
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border-radius:999px;border:1px solid var(--line-strong);background:rgba(245,197,107,.06);color:var(--accent);font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px rgba(245,197,107,.7)}
.lhero{display:grid;gap:28px;padding:36px 0 8px}
.lhero h1{margin-top:18px;font-size:clamp(2.5rem,9vw,3.75rem);font-weight:500;letter-spacing:-.045em;line-height:1.02}
.lhero__lede{margin-top:16px;max-width:54ch;font-size:17px;line-height:1.65;color:var(--ink-2)}
.lhero__act{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.lhero__act .btn{min-height:48px;padding:0 22px;font-size:15px}
/* Saudaflow's own buttons carry the site's weight wherever they stand (the profile's own stay 600) */
.lhero__act .btn,.lcta .btn,.crmcard__act .btn,.crmband .btn{font-weight:500}
.lhero__note{display:flex;gap:8px;align-items:flex-start;margin-top:20px;font-size:13.5px;color:var(--muted)}
.lhero__note .icon{margin-top:3px}
.lhero__pos{color:var(--ink);font-weight:500}
@media (min-width:960px){.lhero{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:56px;align-items:center;padding:64px 0 24px}.lhero__lede{font-size:18px}}
.lsec{margin-top:56px}
.landing>.card{margin-top:56px}
.lsec>h2,.card--planned h2{font-size:clamp(1.5rem,3.4vw,2rem);font-weight:500;letter-spacing:-.035em;line-height:1.15}
.lsec__intro{color:var(--ink-2)}
.lgrid,.lsteps{display:grid;gap:16px;margin-top:24px;grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.lgrid,.lsteps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.lgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lgrid h3,.lsteps h3{margin:0;font-size:17px;font-weight:500;letter-spacing:-.02em}
.lcard h3{display:flex;gap:10px;align-items:center}
.lcard h3 .icon{color:var(--accent)}
.lcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin:20px 0 0;padding:14px 16px 14px 20px;border-radius:var(--r-16);border:1px solid var(--line);color:var(--ink-2)}
.card--planned{border-style:dashed;border-color:rgba(201,194,221,.35);background:none;box-shadow:none}
.nextlist{display:grid;gap:10px;margin-top:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.nextlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nextlist li{padding:12px 14px;border-radius:var(--r-12);background:var(--neu-bg);color:var(--ink);font-weight:500}
.links--go li{padding:0;border-top:1px solid var(--line-soft)}
.links--go a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;color:var(--ink);font-weight:500}
.links--go a:hover{color:var(--accent);text-decoration:none}
.links--go .icon{color:var(--accent)}
.links--row{display:flex;flex-wrap:wrap;gap:4px 24px}
.lsteps__n{display:block;font:500 13px/1 var(--font-brand);letter-spacing:.08em;color:var(--accent);margin-bottom:12px}
.lsteps p,.faq p{color:var(--ink-2)}
.lrules{background:none;box-shadow:none}

/* footer — the site's columns: the lockup and the provenance, Circle's own links, the CRM's (§4h, D-833) */
.foot{margin-top:56px;border-top:1px solid rgba(245,197,107,.1)}
.crmband+.foot{margin-top:48px}
.foot .wrap{padding-top:40px;padding-bottom:32px}
.foot__grid{display:grid;gap:32px 28px;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){.foot__grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:40px}}
.foot__tag{margin:6px 0 0;font-size:13.5px;color:var(--ink-2);max-width:34ch}
.foot__prov,.foot__status{margin-top:12px;font-size:12.5px;line-height:1.6;color:var(--muted);max-width:52ch}
.foot__status{margin-top:6px}
.foot__group{margin:0;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.foot__links{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px;font-size:13.5px}
.foot__links a{display:inline-block;padding:6px 0;color:var(--ink-2)}
.foot__links a:hover{color:var(--ink);text-decoration:none}
.foot__bot{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;margin-top:32px;padding-top:20px;border-top:1px solid rgba(245,197,107,.1);font-size:12.5px;color:var(--muted)}
.foot__bot p{margin:0}
.rel{color:var(--muted);font-size:12px}