/* ══ Services overview page only ══════════════════════════════════════
   Sections: light hero (shared, style.css) · all services (white) · build your mission (navy) · FAQ (white) · ready for launch (shared, style.css)
   Behaviour lives in assets/js/services.js.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 2 · all services (white) — fraxbit-style clean cards ─────────── */
.sv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,20px)}
.sv-cell{display:flex}          /* carries the scroll reveal */
.sv-card{position:relative;isolation:isolate;overflow:hidden;flex:1;display:flex;flex-direction:column;
  min-height:clamp(440px,36vw,540px);padding:clamp(26px,2.6vw,40px);border-radius:22px;color:var(--navy);
  background:#F4F6F8;box-shadow:inset 0 0 0 1px var(--line-dark);scroll-margin-top:110px;
  transition:color .6s var(--ease-out),box-shadow .6s var(--ease-out)}
/* the navy panel that rises from the bottom on hover (clip-path from 100% → 0) */
.sv-card::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(90% 60% at 85% 0%,rgba(30,193,203,.16),rgba(30,193,203,0) 70%),var(--ink);
  clip-path:inset(100% 0 0 0 round 22px);transition:clip-path .7s var(--ease-out)}
.sv-card:hover,.sv-card:focus-visible{color:var(--white);box-shadow:inset 0 0 0 1px var(--ink)}
.sv-card:hover::before,.sv-card:focus-visible::before{clip-path:inset(0 0 0 0 round 22px)}
.sv-card:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.sv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.sv-num{font:600 13px/1 var(--font);letter-spacing:.18em;color:#0E8F97;transition:color .6s var(--ease-out)}
.sv-card:hover .sv-num{color:var(--cyan)}
/* the arrow button: tilted at rest, turns upright on a cyan disc on hover; the arrow inside slides out and a
   fresh one slides in from the bottom-left */
.sv-go{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;flex:none;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent);rotate:-45deg;
  transition:background .5s var(--ease-out),rotate .6s var(--ease-out),box-shadow .5s var(--ease-out),color .5s}
.sv-card:hover .sv-go{background:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan);color:var(--navy);rotate:0deg}
.arr2{position:relative;width:16px;height:16px;overflow:clip}
.arr2 svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .6s var(--ease-out)}
.arr2 svg:last-child{transform:translate(-120%,120%)}
.sv-card:hover .arr2 svg:first-child{transform:translate(120%,-120%)}
.sv-card:hover .arr2 svg:last-child{transform:none}
/* the title sits the same distance from the top in every card, so titles in a row always line up (however many tags
   or title lines a card has); the tags follow it and the price is pinned to the bottom */
.sv-card h3{margin-top:clamp(56px,6.5vw,104px);font:500 clamp(34px,3.3vw,54px)/1 var(--font);letter-spacing:-.05em}
.sv-sub{margin-top:14px;font-size:16px;line-height:1.5;opacity:.65}
.sv-tags{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0;list-style:none}
.sv-tags li{font:500 12.5px/1 var(--font);border-radius:999px;padding:8px 13px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent)}
.sv-price{display:flex;align-items:baseline;gap:8px;margin-top:auto;padding-top:20px;
  border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.sv-price span{font:600 10px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;opacity:.6}
.sv-price b{font:700 20px/1 var(--font);letter-spacing:-.02em}
.sv-price em{font:500 12px/1 var(--font);font-style:normal;opacity:.6}

@media (max-width:1100px){.sv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.sv-grid{grid-template-columns:1fr}.sv-card{min-height:0}}

/* ── 3 · build your mission (navy) — fraxbit's "better together" ──── */
.section.s-plan{overflow:clip;background:
  radial-gradient(50% 45% at 100% 0%,rgba(30,193,203,.12),rgba(30,193,203,0) 70%),
  radial-gradient(40% 40% at 0% 100%,rgba(111,232,240,.06),rgba(111,232,240,0) 70%),var(--navy)}
.pl-label{font:600 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:var(--slate);margin-bottom:20px}
.pl-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pick{position:relative;display:grid;grid-template-columns:1fr auto;align-content:start;min-height:168px;padding:22px 24px 24px;cursor:pointer;
  border-radius:20px;background:rgba(255,255,255,.025);box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.pick:hover{box-shadow:inset 0 0 0 1px rgba(30,193,203,.5)}
.pick.on{background:rgba(30,193,203,.08);box-shadow:inset 0 0 0 1.5px var(--cyan)}
.pick input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pick:has(input:focus-visible){outline:2px solid var(--aurora);outline-offset:3px}
.pick-num{font:600 12px/1 var(--font);letter-spacing:.18em;color:var(--cyan);align-self:center}
.pick-check{width:26px;height:26px;border-radius:50%;position:relative;box-shadow:inset 0 0 0 1.5px var(--line-strong);transition:background .3s,box-shadow .3s}
.pick-check::after{content:"";position:absolute;left:9px;top:5.5px;width:6px;height:11px;border:solid var(--navy);border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(0);transition:transform .35s var(--ease-out)}
.pick.on .pick-check{background:var(--cyan);box-shadow:none}
.pick.on .pick-check::after{transform:rotate(45deg) scale(1)}
.pick-name{grid-column:1/-1;margin-top:auto;padding-top:42px;font:500 clamp(21px,1.8vw,26px)/1.1 var(--font);letter-spacing:-.035em;color:var(--cloud)}
.pick-sub{grid-column:1/-1;margin-top:8px;font-size:14px;color:var(--slate)}

/* the deal panel: big discount on the left; tiers, note and button on the right */
.pl-deal{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,72px);align-items:center;margin-top:12px;
  padding:clamp(28px,3.4vw,52px);border-radius:24px;background:linear-gradient(160deg,#22222F,var(--ink) 60%,#121219);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 50px 90px -50px rgba(0,0,0,.9);position:relative}
.pl-deal::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,rgba(111,232,240,0),var(--aurora),rgba(111,232,240,0))}
.deal-kicker{font:600 12px/1 var(--font);letter-spacing:.22em;text-transform:uppercase;color:var(--slate)}
.deal-pct{margin-top:18px;font:500 clamp(96px,12vw,180px)/.85 var(--font);letter-spacing:-.06em;color:var(--white);font-variant-numeric:tabular-nums;white-space:nowrap}
.deal-pct i{font-style:normal;color:var(--cyan);margin-left:.02em}
.s-plan.has-discount .deal-pct b{text-shadow:0 0 40px rgba(111,232,240,.35)}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none}
.tiers li{display:flex;flex-direction:column;gap:9px;padding:14px 14px 13px;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.tiers span{font:600 10px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.tiers b{font:700 20px/1 var(--font);letter-spacing:-.02em;color:var(--muted);transition:color .4s}
.tiers li.on span{color:var(--slate)}
.tiers li.on b{color:var(--cloud)}
.tiers li.now{background:rgba(30,193,203,.1);box-shadow:inset 0 0 0 1px var(--cyan)}
.tiers li.now b{color:var(--cyan)}
.deal-note{margin-top:22px;min-height:3.2em;font-size:16px;line-height:1.6;color:var(--cloud);max-width:44ch}
.deal-btns{display:flex;align-items:center;flex-wrap:wrap;gap:14px 22px;margin-top:22px}
.deal-btns .btn.is-off{opacity:.4;pointer-events:none}
.deal-alt{font-size:14px;color:var(--slate);text-decoration:underline;text-underline-offset:4px;transition:color .2s}
.deal-alt:hover{color:var(--aurora)}

@media (max-width:1000px){.pl-picks{grid-template-columns:repeat(2,minmax(0,1fr))}.pl-deal{grid-template-columns:1fr}}
@media (max-width:560px){.pl-picks{grid-template-columns:1fr}.pick{min-height:0}.pick-name{padding-top:28px}
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.deal-btns .btn{width:100%;justify-content:space-between}}

/* ── 4 · FAQ: shared (style.css → .fq-*) ── */

/* ── 5 · ready for launch: shared ending for inner pages — its styles live in style.css (.s-cta) ── */