/* CloudGate: sign-up and pricing flow (owner, 10 Nov 2026).
   Loaded on every page after site.css and built only from its tokens, so
   light and dark mode both work. Covers the header's Log in / Get started,
   the homepage hero offer, the price cards (pricing page, homepage,
   features page), the billing switch and the sign-in popup. */

/* ---------- Header: Log in + Get started ---------- */
.nav-login{
  display:inline-flex;align-items:center;min-height:40px;padding:0 var(--s-3);
  border-radius:10px;color:var(--text);font-size:var(--fs-sm);font-weight:600;
  text-decoration:none;transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
}
.nav-login:hover{background:var(--fill-hover);}
.nav-login:active{background:var(--fill-press);}
@media (max-width:420px){ .nav-login{display:none;} }
.mnav-login{display:block;margin-top:var(--s-3);text-align:center;font-weight:600;color:var(--text);text-decoration:none;padding:var(--s-2);}
.mnav-login:hover{color:var(--blue-text);}

/* ---------- Homepage hero ---------- */
.hero-offer{
  display:inline-flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-4);
  padding:6px 14px 6px 6px;border-radius:var(--r-pill);background:var(--blue-pale);
  color:var(--blue-text);font-size:var(--fs-sm);font-weight:600;
}
.hero-offer strong{display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-pill);background:var(--blue);color:var(--on-blue);font-weight:700;white-space:nowrap;flex-shrink:0;}
@media (max-width:420px){ .hero-offer{font-size:var(--fs-xs);padding-right:12px;} }
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-6);}
@media (max-width:520px){ .hero-actions .btn{width:100%;} }

/* ---------- 100GB free band ---------- */
.free-band{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s-5);
  margin-bottom:var(--s-7);padding:var(--s-5) var(--s-6);border-radius:var(--r-panel);
  background:var(--surface);border:1px solid var(--blue-line);box-shadow:var(--sh-1);
}
.free-band-amt{font-family:var(--font-num);font-size:clamp(2.25rem,1.6rem + 2.4vw,3.25rem);font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--blue-text);}
.free-band-amt small{font-size:.5em;margin-left:2px;}
.free-band h3{font-size:var(--fs-lg);letter-spacing:var(--tr-head);}
.free-band p{margin-top:4px;color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-body);}
@media (max-width:720px){
  .free-band{grid-template-columns:1fr;gap:var(--s-3);padding:var(--s-5);text-align:left;}
  .free-band .btn{width:100%;}
}

/* ---------- Billing switch (Monthly / Yearly) ---------- */
.bill-switch{
  display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);
  background:var(--bg-tint);border:1px solid var(--line);
}
.bill-switch label{position:relative;cursor:pointer;}
.bill-switch input{position:absolute;opacity:0;pointer-events:none;}
.bill-switch span{
  display:inline-flex;align-items:center;min-height:38px;padding:0 18px;border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
  transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.bill-switch input:checked + span{background:var(--surface);color:var(--text);box-shadow:var(--sh-1);}
.bill-switch input:focus-visible + span{box-shadow:var(--focus);}
.bill-switch-wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-3);margin-bottom:var(--s-6);}
/* Currency picker (pricing page), the same height and shape as the switch. */
.cur-pick{position:relative;display:inline-flex;align-items:center;}
.cur-pick[hidden]{display:none;}
.cur-pick label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.cur-pick select{
  appearance:none;-webkit-appearance:none;min-height:48px;max-width:min(17rem,calc(100vw - 32px));padding:0 40px 0 18px;
  border-radius:var(--r-pill);border:1px solid var(--line);background:var(--bg-tint);color:var(--text);
  font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.cur-pick select:hover{border-color:var(--line-strong);}
.cur-pick select:focus-visible{outline:none;box-shadow:var(--focus);}

/* ---------- Price cards ---------- */
.price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);align-items:stretch;}
@media (max-width:960px){
  .price-grid{grid-template-columns:1fr;max-width:30rem;margin-inline:auto;}
  /* Stacked: room for the Best value flag above Pro. */
  .price-card--best{margin-top:calc(var(--fs-xs) * 1.5 + 12px);}
}
.price-card{
  position:relative;display:flex;flex-direction:column;
  padding:var(--s-6) var(--s-5) var(--s-5);border-radius:var(--r-panel);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.price-card--best{border-color:var(--blue);box-shadow:var(--sh-2);}
.price-flag{
  position:absolute;top:-1px;left:-1px;right:-1px;transform:translateY(-100%);
  padding:6px var(--s-4);border-radius:var(--r-panel) var(--r-panel) 0 0;
  background:var(--blue);color:var(--on-blue);font-size:var(--fs-xs);font-weight:700;letter-spacing:.01em;
}
.price-for{font-size:var(--fs-sm);color:var(--text-3);font-weight:500;}
.price-name{margin-top:var(--s-1);font-size:var(--fs-xl);letter-spacing:var(--tr-title);}
.price-storage{margin-top:2px;font-size:var(--fs-sm);font-weight:600;color:var(--blue-text);}
.price-amt{margin-top:var(--s-4);display:flex;align-items:baseline;gap:4px;flex-wrap:wrap;}
.price-num{font-family:var(--font-num);font-size:2rem;font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--text);}
.price-per{font-size:var(--fs-sm);color:var(--text-2);font-weight:500;}
/* A price the owner hasn't given yet: an amber blank, never a made-up figure. */
.price-tbd{color:var(--amber-text);background:var(--amber-pale);border-bottom:2px dashed var(--amber);border-radius:6px 6px 0 0;padding:0 6px;}
.price-trial{margin-top:var(--s-1);font-size:var(--fs-sm);font-weight:600;color:var(--green-text);}
.price-actions{margin-top:var(--s-5);display:grid;gap:var(--s-2);}
.price-actions .btn{width:100%;justify-content:space-between;}
.price-buy{
  justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;
  color:var(--text);font:inherit;font-size:var(--fs-sm);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.price-buy:hover{color:var(--blue-text);}
.price-buy svg{width:14px;height:14px;}
.price-terms{margin-top:var(--s-3);font-size:var(--fs-xs);line-height:1.55;color:var(--text-3);}
.price-feats{margin-top:var(--s-5);padding-top:var(--s-5);border-top:1px solid var(--line);display:grid;gap:10px;list-style:none;}
.price-feats li{display:flex;gap:10px;font-size:var(--fs-sm);color:var(--text-2);line-height:1.45;}
.price-feats svg{width:18px;height:18px;flex-shrink:0;color:var(--blue-text);margin-top:1px;}
.price-feats strong{color:var(--text);}
.price-card--compact{padding-top:var(--s-5);}
.price-card--compact .price-feats{display:none;}
.price-foot{margin-top:var(--s-6);text-align:center;color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-body);}
.price-foot a{color:var(--blue-text);font-weight:600;}
.price-grid--flagged{margin-top:var(--s-6);}

/* ---------- Pricing page ---------- */
.pricing-hero{padding-top:var(--hero-top);padding-bottom:var(--s-7);text-align:center;background:var(--hero-bg);}
.pricing-hero h1{font-size:var(--fs-4xl);letter-spacing:var(--tr-display);line-height:var(--lh-tight);}
.pricing-hero .lead{max-width:36rem;margin:var(--s-4) auto 0;color:var(--text-2);font-size:var(--fs-md);line-height:var(--lh-lead);}
.pricing-free{
  max-width:44rem;margin:var(--s-7) auto 0;padding:var(--s-5);border-radius:var(--r-lg);
  background:var(--bg-tint);border:1px solid var(--line);display:flex;gap:var(--s-4);align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.pricing-free p{color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-body);}
.pricing-free strong{color:var(--text);}
.billing-facts{max-width:52rem;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);}
.billing-facts div{padding:var(--s-5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);}
.billing-facts h3{font-size:var(--fs-md);letter-spacing:var(--tr-head);}
.billing-facts p{margin-top:6px;font-size:var(--fs-sm);color:var(--text-2);line-height:var(--lh-body);}
@media (max-width:720px){ .billing-facts{grid-template-columns:1fr;} }

/* ---------- Sign-in popup ----------
   One spacing system, on a 4px grid:
   --ap  the panel's margin, the same on every side;
   --ag  the space between groups (header, plan, Google/Apple, email,
         footer), so each group reads as one block;
   8px   between things inside a group.
   Controls are 44px tall; inner corners nest inside the panel's. */
.auth-modal{
  --ap:24px;--ag:20px;--ctl:44px;
  position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:var(--s-4);
}
.auth-modal[hidden]{display:none;}
.auth-backdrop{position:absolute;inset:0;background:rgba(11,13,20,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}
.auth-panel{
  position:relative;width:100%;max-width:27rem;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:var(--ap);border-radius:var(--r-xl);
  background:var(--surface-raised);border:1px solid var(--line);box-shadow:var(--sh-3);text-align:center;
}
.auth-panel:focus{outline:none;}
.auth-x{
  position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:var(--r-pill);background:var(--fill-hover);color:var(--text-2);cursor:pointer;
  transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out);
}
.auth-x:hover{background:var(--fill-press);color:var(--text);}
.auth-x svg{width:16px;height:16px;}

/* Header */
.auth-logo{display:block;width:40px;height:40px;margin:4px auto 12px;border-radius:10px;}
.auth-title{padding-inline:40px;font-size:var(--fs-xl);line-height:1.2;letter-spacing:var(--tr-title);}
.auth-sub{margin-top:4px;padding-inline:8px;color:var(--text-2);font-size:var(--fs-sm);line-height:1.45;text-wrap:balance;}
.auth-modal--plan .auth-logo,.auth-modal--plan .auth-apps{display:none;}
.auth-modal--plan .auth-title{margin-top:6px;font-size:var(--fs-lg);}

/* Plan summary */
.auth-plan{margin-top:var(--ag);padding:16px;border-radius:var(--r-lg);background:var(--bg-tint);border:1px solid var(--line);text-align:left;}
.auth-plan-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--fs-sm);font-weight:700;line-height:1.3;}
.auth-plan-head span:last-child{color:var(--text-2);font-weight:600;font-size:var(--fs-xs);white-space:nowrap;}
.auth-plan dl{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);display:grid;gap:4px;font-size:var(--fs-sm);line-height:1.5;}
.auth-plan dl div{display:flex;justify-content:space-between;gap:12px;}
.auth-plan dt{color:var(--text-2);}
.auth-plan dd{margin:0;font-weight:600;color:var(--text);text-align:right;}
.auth-plan p{margin-top:8px;font-size:var(--fs-xs);line-height:1.5;color:var(--text-3);}

/* Google / Apple */
.auth-btns{margin-top:var(--ag);display:grid;gap:8px;}
.auth-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--ctl);padding:0 16px;
  border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.005em;text-decoration:none;
  transition:border-color var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out),transform 100ms ease-out;
}
.auth-btn:hover{border-color:var(--text-3);background:var(--fill-hover);}
.auth-btn:active{background:var(--fill-press);transform:scale(.98);}
.auth-btn svg{width:18px;height:18px;flex-shrink:0;}

/* or */
.auth-or{display:flex;align-items:center;gap:12px;margin:12px 0;color:var(--text-3);font-size:var(--fs-xs);font-weight:600;line-height:16px;}
.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:var(--line);}

/* Email */
.auth-form{display:grid;gap:8px;text-align:left;}
.auth-form input{
  min-height:var(--ctl);padding:0 14px;border-radius:var(--r-md);border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font:inherit;font-size:var(--fs-base);
  transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.auth-form input::placeholder{color:var(--text-3);opacity:1;}
.auth-form input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-line);}
.auth-form .btn{width:100%;min-height:var(--ctl);border-radius:var(--r-md);}
.auth-form .btn:active{transform:scale(.98);}

/* Footer: switch, legal, apps */
.auth-switch{margin-top:var(--ag);font-size:var(--fs-sm);line-height:20px;color:var(--text-2);}
.auth-switch button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--blue-text);cursor:pointer;text-decoration:underline;text-underline-offset:3px;}
.auth-legal{margin-top:4px;font-size:var(--fs-xs);line-height:18px;color:var(--text-3);}
.auth-legal a{color:inherit;}
.auth-apps{margin:var(--ag) calc(-1 * var(--ap)) calc(-1 * var(--ap));padding:12px var(--ap) 14px;border-top:1px solid var(--line);background:var(--bg-tint);font-size:var(--fs-xs);line-height:18px;color:var(--text-3);}
.auth-apps a{color:var(--text-2);font-weight:600;}
body.auth-open{overflow:hidden;}

/* Phones: a little less margin, same rhythm. */
@media (max-width:420px){
  .auth-modal{--ap:20px;padding:12px;}
  .auth-panel{max-height:calc(100dvh - 24px);}
}
/* Short screens (small phones, landscape): drop the extras so it fits. */
@media (max-height:620px){
  .auth-modal{--ag:16px;padding:12px;}
  .auth-panel{max-height:calc(100dvh - 24px);}
  .auth-logo,.auth-apps{display:none;}
}
@media (prefers-reduced-motion:no-preference){
  .auth-modal:not([hidden]) .auth-panel{animation:auth-in var(--dur-spring) var(--spring);}
  .auth-modal:not([hidden]) .auth-backdrop{animation:auth-fade 200ms ease-out;}
}
@keyframes auth-in{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}}
@keyframes auth-fade{from{opacity:0;}to{opacity:1;}}

/* ---------- Special offer popup (Pro trial) ---------- */
.offer-actions{margin-top:var(--ag);display:grid;gap:4px;}
.offer-actions .btn{width:100%;min-height:var(--ctl);border-radius:var(--r-md);}
.offer-no{
  min-height:var(--ctl);border:0;background:none;border-radius:var(--r-md);cursor:pointer;
  font:inherit;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);
}
.offer-no:hover{background:var(--fill-hover);color:var(--text);}
.offer-modal .auth-logo{margin-top:4px;}

/* ---------- Pricing page: the Premium layout (owner's design, 13 Nov 2026) ----------
   Title on the left and a controls panel (billing, currency) on the
   right; three cards with storage first; Family as the featured dark
   card with a 1TB / 5TB choice. */
.prem{padding-top:var(--hero-top);padding-bottom:var(--s-8);background:var(--hero-bg);}
.prem-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s-6) var(--s-7);}
.prem-intro{flex:1 1 22rem;max-width:38rem;}
.prem-intro h1{font-size:var(--fs-4xl);letter-spacing:var(--tr-display);line-height:var(--lh-tight);}
.prem-intro .lead{margin-top:var(--s-4);color:var(--text-2);font-size:var(--fs-md);line-height:var(--lh-lead);}
.prem-controls{
  flex:0 1 21rem;min-width:min(17.5rem,100%);display:grid;gap:14px;padding:20px;
  border-radius:20px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.prem-controls .bill-switch{display:flex;}
.prem-controls .bill-switch label{flex:1;}
.prem-controls .bill-switch span{justify-content:center;width:100%;}
.prem-controls .cur-pick{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.prem-controls .cur-pick[hidden]{display:none;}
.prem-controls .cur-pick label{position:static;width:auto;height:auto;overflow:visible;clip:auto;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);}
.prem-controls .cur-pick select{min-height:44px;width:11rem;max-width:60%;border-radius:12px;background-color:var(--surface);border-color:var(--line-strong);}

.prem-grid{margin-top:var(--s-7);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5);align-items:stretch;}
@media (max-width:1023.98px){ .prem-grid{grid-template-columns:minmax(0,1fr);max-width:32rem;margin-inline:auto;} }

.pcard{
  display:flex;flex-direction:column;gap:18px;padding:28px;border-radius:var(--r-xl);
  background:var(--surface);color:var(--text);border:1px solid var(--line);box-shadow:var(--sh-1);
}
.pcard--best{border:2px solid var(--blue);padding:27px;box-shadow:var(--sh-2);}
/* The featured card: deep navy in both themes, with its own text and line
   colours, so everything inside it (terms, list, links) reads on it. */
.pcard--family{
  --text:#FFFFFF;--text-2:#C5C8F5;--text-3:#B4B9F0;--line:rgba(255,255,255,.2);--line-strong:rgba(255,255,255,.35);
  --blue-text:#C9CFFB;--green-text:#9BE8BF;--fill-hover:rgba(255,255,255,.08);
  background:#1D1F4A;border-color:#1D1F4A;box-shadow:0 24px 48px -20px rgba(29,31,74,.55);
}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px;}
.pcard-name{font-size:var(--fs-lg);letter-spacing:var(--tr-title);}
.pcard-pill{padding:5px 12px;border-radius:var(--r-pill);background:var(--blue-pale);color:var(--blue-text);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;}
.pcard--family .pcard-pill{background:#C9CFFB;color:#1D1F4A;}
.pcard-store{display:grid;gap:10px;}
.pcard-size{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;}
.pcard-gb{font-family:var(--font-num);font-size:clamp(2.25rem,1.9rem + 1vw,2.75rem);font-weight:700;line-height:1;letter-spacing:-.03em;}
.pcard-muted{font-size:var(--fs-sm);color:var(--text-2);}
.pcard-bar{height:6px;border-radius:var(--r-pill);overflow:hidden;background:var(--bg-tint);box-shadow:inset 0 0 0 1px var(--line);}
.pcard-bar i{display:block;height:100%;min-width:8px;border-radius:inherit;background:var(--blue);transition:width var(--dur-spring) var(--spring);}
.pcard--family .pcard-bar{background:rgba(255,255,255,.18);box-shadow:none;}
.pcard--family .pcard-bar i{background:#AAB3FA;}

.pcard-sizes{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pcard-sizes button{
  min-height:52px;padding:9px 12px;border-radius:12px;text-align:left;cursor:pointer;font:inherit;
  border:2px solid rgba(255,255,255,.25);background:transparent;color:#FFFFFF;
  transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),transform 100ms ease-out;
}
.pcard-sizes button:hover{border-color:rgba(255,255,255,.5);}
.pcard-sizes button:active{transform:scale(.98);}
.pcard-sizes button[aria-pressed="true"]{background:#FFFFFF;border-color:#FFFFFF;color:#1D1F4A;}
.pcard-sizes button:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.pcard-sizes button:focus-visible{outline:3px solid #AAB3FA;outline-offset:2px;}
.pcard-sizes b{display:block;font-size:var(--fs-md);font-weight:700;line-height:1.2;}
.pcard-sizes span{display:block;margin-top:2px;font-size:var(--fs-xs);font-weight:500;opacity:.85;}

.pcard-price{display:grid;gap:6px;padding-top:18px;border-top:1px solid var(--line);}
.pcard .price-num{font-size:1.75rem;}
.pcard-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:var(--fs-xs);color:var(--text-2);}
.pcard-trial{font-weight:600;color:var(--green-text);}
.pcard-trial::before{content:"·";margin-right:8px;color:var(--text-3);font-weight:400;}
.pcard .price-amt{margin-top:0;}
.pcard-billed{font-size:var(--fs-xs);color:var(--text-2);}
.pcard .price-actions{margin-top:2px;gap:6px;}
.pcard .price-actions .btn{min-height:48px;font-size:var(--fs-base);}
.pcard .price-buy{min-height:32px;}
.pcard .price-terms{margin-top:-6px;line-height:1.5;}
.pcard .price-feats{margin-top:2px;padding-top:16px;border-top:1px solid var(--line);gap:10px;}
.pcard .price-feats li{font-size:var(--fs-sm);}
.pcard-cta-light{background:#FFFFFF;color:#1D1F4A;box-shadow:none;}
.pcard-cta-light:hover{background:#EEF0FF;color:#1D1F4A;}

.prem-foot{
  margin-top:var(--s-7);padding-top:28px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.prem-foot p{max-width:44rem;color:var(--text-2);font-size:var(--fs-sm);line-height:var(--lh-body);}
.prem-foot strong{color:var(--text);}
@media (max-width:520px){
  .pcard{padding:22px;}
  .pcard--best{padding:21px;}
  .prem-foot .btn{width:100%;}
}

/* ---------- Plans: controls on the homepage and Features, smooth changes ---------- */
.plans-controls{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--s-3);margin-top:var(--s-6);}
.plans-controls + .prem-grid{margin-top:var(--s-6);}
.pcard-save{padding:2px 8px;border-radius:var(--r-pill);background:var(--blue-pale);color:var(--blue-text);font-weight:700;}
.pcard--family .pcard-save{background:rgba(255,255,255,.14);color:#FFFFFF;}
.pcard-save[hidden]{display:none;}
/* The Monthly / Yearly switch: one thumb that slides between the two. */
@supports selector(:has(*)){
  .bill-switch{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;}
  .prem-controls .bill-switch{display:grid;}
  .bill-switch label{display:flex;}
  .bill-switch span{position:relative;justify-content:center;width:100%;}
  .bill-switch::before{
    content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 6px);
    border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--sh-1);
    transition:transform var(--dur-spring) var(--spring);
  }
  .bill-switch:has(label:nth-child(2) input:checked)::before{transform:translateX(calc(100% + 4px));}
  .bill-switch input:checked + span{background:transparent;box-shadow:none;}
}
@media (prefers-reduced-motion:reduce){
  .bill-switch::before,.pcard-bar i{transition:none;}
}

/* Get started on the pricing page scrolls here, clear of the floating header. */
#plans{scroll-margin-top:calc(var(--header-h) + var(--header-top) + var(--s-5));}

/* ---------- Main calls to action: bigger and clearer ---------- */
.btn-xl{--btn-h:58px;padding:0 30px;font-size:1.125rem;font-weight:700;border-radius:14px;}
.btn-xl svg{width:18px;height:18px;}
.btn-primary.btn-xl{box-shadow:0 14px 30px -10px rgba(59,99,245,.6);}
.btn-primary.btn-xl:hover{transform:translateY(-1px);box-shadow:0 18px 36px -12px rgba(59,99,245,.7);}
.btn-secondary.btn-xl{border-width:2px;border-color:var(--line-strong);background:var(--surface);box-shadow:var(--sh-1);}
.btn-secondary.btn-xl:hover{transform:translateY(-1px);}
.hero-actions{gap:var(--s-3) var(--s-4);margin-top:var(--s-6);}
.hero-actions + .hero-trust{margin-top:var(--s-6);}
/* On the blue band: a white primary and an outlined secondary. */
.cta-actions{display:flex;flex-wrap:wrap;gap:var(--s-3);flex-shrink:0;}
.btn-on-blue{background:#FFFFFF;color:#1F3FD1;box-shadow:0 14px 30px -12px rgba(10,12,26,.45);}
.btn-on-blue:hover{background:#EEF2FF;color:#1F3FD1;transform:translateY(-1px);}
.btn-outline-on-blue{background:transparent;color:#FFFFFF;border:2px solid rgba(255,255,255,.6);}
.btn-outline-on-blue:hover{background:rgba(255,255,255,.12);border-color:#FFFFFF;color:#FFFFFF;transform:translateY(-1px);}
@media (max-width:767.98px){ .cta-actions{justify-content:center;} }
@media (max-width:520px){
  .hero-actions .btn,.cta-actions,.cta-actions .btn{width:100%;}
  .btn-xl{--btn-h:54px;font-size:var(--fs-md);}
}