/* ui.css — loaded last on every page.
   1. self-hosted fonts   2. one radius scale   3. services section   4. motion polish (reduced-motion safe) */

/* ---------- 1. fonts (self-hosted, no third-party request) ---------- */
@font-face{font-family:"Fraunces";src:url(/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Tiro Devanagari Sanskrit";src:url(/assets/fonts/tiro-sphota-subset.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- 2. one radius scale, used everywhere ----------
   xs: tags, marks, small chips   s: inputs, small panels   m: images, inner cards
   l: cards and containers        pill: buttons, nav, chips, badges */
:root{--r-xs:8px;--r-s:14px;--r-m:20px;--r-l:28px;--r-pill:999px}
main img:not(.logo-nav):not(.logo-giant),.page-shot img,.manu img,figure img{border-radius:var(--r-m)}
.input,textarea,select{border-radius:var(--r-s)}
.btn,.nav .btn,.tab,.chipbtn,.pill,.badge{border-radius:var(--r-pill)}
.brand img.logo-nav{height:40px;width:auto}
.nav .brand img.logo-nav{height:40px}
@media(max-width:520px){.brand img.logo-nav{height:34px}}
.giant img.logo-giant{width:100%;max-width:1040px;height:auto}
.brand img{height:36px;width:auto}

/* ---------- 3. services ---------- */
.svc{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;gap:14px}
.svc li{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(16px,3vw,40px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,2.6vw,32px) clamp(22px,3vw,40px)}
.svc h3{font-size:clamp(1.35rem,2.2vw,1.8rem);font-weight:600;letter-spacing:-.015em;margin:0 0 6px}
.svc p{margin:0;color:var(--muted);font-size:1rem;max-width:58ch}
.svc-a{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px 18px}
.svc-tag{display:inline-flex;align-items:center;min-height:32px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font:700 .78rem/1 var(--f-body);letter-spacing:.02em}
.svc-tag.free{background:var(--saffron);color:var(--ink)}
.svc-go{display:inline-flex;align-items:center;gap:8px;font:700 .95rem/1 var(--f-body);color:var(--ink);text-decoration:none;border-bottom:2px solid var(--saffron);padding-bottom:3px}
.svc-go svg,.svc-foot svg{width:16px;height:16px;flex:none}
.svc-foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin:clamp(24px,3vw,36px) 0 0}
.svc-lede{max-width:60ch}
@media(max-width:820px){.svc li{grid-template-columns:1fr}.svc-a{justify-content:flex-start}}

/* ---------- 3b. evidence strip ---------- */
.why-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:clamp(28px,4vw,48px) 0 0;padding:0;list-style:none}
.why-stats li{background:rgba(255,255,255,.06);border:1px solid var(--line-d);border-radius:var(--r-l);padding:clamp(22px,2.6vw,32px)}
.why-stats b{display:block;font:700 clamp(2.4rem,5vw,4rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--on-ink);font-variation-settings:"opsz" 144}
.why-stats p{margin:10px 0 0;color:var(--on-ink-muted);font-size:1rem}
.why-stats a{color:var(--haldi);font-size:.85rem;text-underline-offset:3px}
@media(max-width:820px){.why-stats{grid-template-columns:1fr}}

/* ---------- 4. motion polish ---------- */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform .25s var(--ease-expo,cubic-bezier(.16,1,.3,1)),box-shadow .25s,background-color .2s,color .2s,border-color .2s}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.98)}
  .svc li,.tq,.offer,.guar,.fit-c,.card,.side,.seal{transition:transform .35s var(--ease-expo,cubic-bezier(.16,1,.3,1)),box-shadow .35s,border-color .25s}
  @media (hover:hover){
    .svc li:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(26,26,64,.35);border-color:rgba(26,26,64,.3)}
    .svc-go{transition:border-color .2s,color .2s,letter-spacing .2s}
    .svc li:hover .svc-go{border-bottom-color:var(--ink)}
    .why-stats li{transition:transform .35s var(--ease-expo,cubic-bezier(.16,1,.3,1)),background .25s}
    .why-stats li:hover{transform:translateY(-4px);background:rgba(255,255,255,.1)}
    main img:not(.logo-nav):not(.logo-giant){transition:transform .6s var(--ease-expo,cubic-bezier(.16,1,.3,1))}
  }
  .input{transition:border-color .2s,box-shadow .2s,transform .2s}
  .input:focus{transform:translateY(-1px)}
  details>summary{transition:color .2s}
  /* sections without script-driven entrance still rise in once */
  .why-stats li,.svc li{animation:ui-rise .7s var(--ease-expo,cubic-bezier(.16,1,.3,1)) both;animation-timeline:view();animation-range:entry 0% entry 40%}
}
@keyframes ui-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@supports not (animation-timeline:view()){.why-stats li,.svc li{animation:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}.btn:hover,.svc li:hover{transform:none}}

/* ======================================================================
   THEME: white ground, deep navy text, one accent (amber gold #FFD700).
   Gold is a FILL (buttons, markers, number badges), never body text on white.
   On navy bands gold may also be text. Navy bands: #why, #contact, footer.
   ====================================================================== */
:root{--gold:#FFD700;--gold-hi:#FFE24D;--navy:#1A1A40;--navy-d:#101030;--ivory:#F6F4EC}
body::after{display:none}                       /* no grain on a crisp white page */
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark :focus-visible,.nav.open :focus-visible{outline-color:var(--gold)}
.progress{background:var(--ink)}

/* tokens re-pointed inside sections that are light but were written for dark */
.lt,.nav{--on-ink:var(--ink);--on-ink-muted:var(--muted);--line-d:var(--line)}

/* nav on white */
.nav.scrolled{background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.nav ul a::after{background:var(--ink)}
.menu-btn{border-color:var(--line)}
@media(max-width:860px){
  .nav.open{background:#fff}
  .nav.open ul{background:#fff;box-shadow:0 24px 36px -20px rgba(26,26,64,.25)}
  .nav.open ul a{color:var(--ink)}
}

/* buttons */
.btn-primary{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.btn-primary::before{background:var(--navy)}
.btn-primary:hover{color:#fff}
.dark .btn-primary::before,.sat .btn-primary::before{background:var(--gold-hi)}
.dark .btn-primary:hover{color:var(--navy)}
.btn-ghost{border-color:var(--ink);color:var(--ink)}
.dark .btn-ghost{border-color:rgba(255,255,255,.6);color:#fff}
.light .btn-ghost::before,.lt .btn-ghost::before{background:var(--ink)}
.light .btn-ghost:hover,.lt .btn-ghost:hover{color:#fff}
.btn-ink{background:var(--navy);color:#fff}
.btn-ink::before{background:var(--gold)}
.btn-ink:hover{color:var(--navy)}

/* links on white: navy with a gold underline, readable and still on-brand */
.light a.tlink,.light .guide-link,.tlink{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:3px;text-underline-offset:4px}
.light a.tlink:hover{background:var(--gold)}
.dark a.tlink{color:#fff;text-decoration-color:var(--gold)}
.skip{background:var(--gold);color:var(--navy)}
::selection{background:var(--gold);color:var(--navy)}

/* accent used as TEXT: navy on white, gold on navy surfaces */
:root{--atx:var(--ink)}
.dark,.result,.price,.acard,.offer,.name-card,.fit-c.yes,.fcta,.timer button,.fs-q:nth-child(4),.steps li,.choice input:checked+span,.pick[aria-pressed=true],.footer-dark{--atx:var(--gold)}
.tlink,.sample-link,.free-line{font-weight:700}
.light .tlink,.lt .tlink,.light .sample-link,.lt .sample-link{border-bottom:3px solid var(--gold);text-decoration:none}
.light .tlink:hover,.lt .tlink:hover,.light .sample-link:hover,.lt .sample-link:hover{background:var(--gold)}
.dark .tlink,.dark .sample-link{border-bottom-color:rgba(255,215,0,.5)}

/* small fixes found by the contrast check */
.tag.b{background:#FBE3E8;color:#8A1030}
.dark .tag.b{background:rgba(255,255,255,.12);color:#FFC9D2}
.he-old{color:#5A5A78}

/* plain-language problem block, definition callout, and how-it-works steps */
.pains-h{margin:34px 0 0;font:700 1.05rem var(--f-body);color:var(--gold)}
.pains{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.pains li{padding:18px 20px;border:1px solid var(--line-d);border-radius:var(--r-m);background:rgba(255,255,255,.05);line-height:1.45}
.plain{margin:28px 0 0;padding:20px 24px;border-radius:var(--r-m);background:var(--gold);color:var(--navy);font-weight:600;line-height:1.5;max-width:62ch}
.how{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:hs}
.how li{counter-increment:hs;padding:24px;border:1px solid var(--line);border-radius:var(--r-l);background:#fff}
.how li::before{content:counter(hs);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--gold);color:var(--navy);font:800 1rem var(--f-body);margin-bottom:16px}
.how h3{font-size:1.25rem;line-height:1.2;margin:0 0 8px}
.how p{margin:0;color:var(--muted);line-height:1.5}
@media(max-width:960px){.how{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.how{grid-template-columns:1fr}.how li{padding:20px}}

/* standalone text links get a 44px touch area, with the gold underline drawn as a background */
.svc-go,.tlink,.sample-link{--ul:var(--gold);border-bottom:0!important;min-height:44px;padding:10px 0!important;margin-top:0;background:linear-gradient(var(--ul),var(--ul)) 0 calc(100% - 10px)/100% 3px no-repeat;text-decoration:none!important;align-items:center}
.dark .tlink,.dark .sample-link,.hero .sample-link{--ul:rgba(255,215,0,.7)}
.hero .sample-link{--ul:var(--gold)}
.svc li:hover .svc-go{--ul:var(--navy)}

/* ---------- form pop-up: centred card on large screens, bottom sheet on phones ---------- */
html.lock{overflow:hidden}
.contact-card h3{font:450 clamp(1.5rem,2.6vw,1.9rem)/1.15 var(--f-display);letter-spacing:-.02em;margin:0 0 14px}
.need{list-style:none;margin:0 0 4px;padding:0;display:grid;gap:10px}
.need li{display:flex;gap:12px;align-items:center;font-weight:600}
.need li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A1A40' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10.5l3.2 3.2L15 6.8'/%3E%3C/svg%3E") center/14px no-repeat}
dialog.sheet{border:0;padding:0;margin:0;background:transparent;color:var(--ink);width:100%;max-width:none;height:var(--vvh,100%);max-height:none;top:var(--vvt,0);bottom:auto;overflow:hidden}
dialog.sheet[open]{display:grid;place-items:center;padding:20px}
dialog.sheet::backdrop{background:rgba(16,16,48,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.sheet-in{position:relative;display:flex;flex-direction:column;width:min(560px,100%);max-height:100%;background:#fff;border-radius:var(--r-l);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden}
#lead{display:flex;flex-direction:column;min-height:0;flex:1}
.sheet-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:30px 28px 10px;-webkit-overflow-scrolling:touch}
.sheet-body h2{font:450 clamp(1.7rem,3.2vw,2.1rem)/1.08 var(--f-display);letter-spacing:-.025em;margin:0 48px 8px 0;outline:none}
.sheet-body .hint{color:var(--muted);margin:0 0 4px;line-height:1.45}
.sheet-foot{flex:none;padding:14px 28px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.sheet-foot .btn{width:100%;margin:0;min-height:56px}
.sheet-foot .small{margin:10px 0 0;font-size:.82rem;color:var(--muted);text-align:center}
.sheet-x{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.sheet-x:hover{background:var(--paper-2)}
.sheet-body .f{margin-top:16px}
.sheet-body label{display:block;font-weight:700;font-size:.95rem;margin-bottom:6px}
.sheet-body .opt{font-weight:500;color:var(--muted)}
.sheet-body .input{font-size:16px;min-height:52px;width:100%}
.sheet-body textarea.input{min-height:96px;resize:vertical;margin-top:4px}
.sheet-body select.input{appearance:none;-webkit-appearance:none;padding-right:44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A1A40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center/16px}
.more{margin-top:12px}
.more summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:700;list-style:none}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"+";display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:800;line-height:1}
.more[open] summary::before{content:"\2212"}
.sheet-body .picks{margin:6px 0 10px}
.sheet-body .pick{min-height:44px}
.sheet-in .sent{padding:48px 28px 34px;text-align:center}
.sheet-in .sent .btn{margin-top:22px;min-width:160px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:no-preference){
  dialog.sheet[open] .sheet-in{animation:sheetIn .4s cubic-bezier(.16,1,.3,1)}
  dialog.sheet[open]::backdrop{animation:sheetFade .3s ease-out}
}
@keyframes sheetIn{from{opacity:0;transform:translateY(28px) scale(.985)}}
@keyframes sheetFade{from{opacity:0}}
@media(max-width:640px){
  dialog.sheet[open]{place-items:end center;padding:0}
  .sheet-in{width:100%;max-height:calc(100% - 12px);border-radius:var(--r-l) var(--r-l) 0 0}
  .sheet-body{padding:24px 20px 8px}
  .sheet-foot{padding-inline:20px}
  .sheet-in .sent{padding-inline:20px}
}
@media(max-width:640px){
  .sheet-foot .btn{white-space:nowrap;font-size:1rem;padding-inline:16px}
  .sheet-body h2{font-size:1.6rem}
  .sheet-body .f{margin-top:12px}
  .sheet-body .input{min-height:48px}
}
@media(max-height:640px){
  .sheet-body .hint{display:none}
  .sheet-body{padding-top:20px}
  .sheet-foot .small{display:none}
  .sheet-foot{padding-top:10px}
}

/* ---------- four-step form inside the pop-up ---------- */
.sheet-body{padding-top:26px}
.sheet-body .fhead{margin:0 52px 18px 0}
.sheet-body .fstep .q{display:block;font:450 clamp(1.5rem,3vw,1.95rem)/1.12 var(--f-display);letter-spacing:-.02em;margin:0 0 6px;padding:0;outline:none;color:var(--ink)}
.sheet-body .fstep .hint{color:var(--muted);margin:0 0 16px;font-size:.95rem}
.sheet-body .choices.big{grid-template-columns:1fr 1fr;gap:10px}
.sheet-body .choice.wide{grid-column:1/-1}
.sheet-body .choices.big .choice span{min-height:52px;padding:12px 14px;font-size:.97rem;align-items:center}
.sheet-body .picks .pick{min-height:46px}
.sheet-body textarea.input{min-height:100px}
.sheet-foot .fnav{display:flex;align-items:center;gap:10px;margin:0}
.sheet-foot .fnav .btn{flex:1;width:auto}
.sheet-foot .fback{flex:none;min-height:56px;padding:0 14px}
@media(max-width:380px){.sheet-body .choices.big .choice span{font-size:.92rem;padding:10px 10px}}
@media(max-height:640px){.sheet-body .fstep .hint{display:none}.sheet-body .fhead{margin-bottom:12px}}