/* ============================================================================
 * Pricing page — dedicated stylesheet, loaded after app.css. Wide dark
 * premium shell, dominant hero with phone visual, compact plan cards (all
 * plan differences live in the Free/Plus cards themselves — no separate
 * comparison table/feature matrix), full-width trust strip. Kept out of
 * app.css so no other page pays for or inherits this page's marketing-
 * scale typography/spacing.
 * ==========================================================================*/

/* ---------------------------------------------------------------------------
 * Shell — the reference is materially wider than the app's shared .wrap
 * (960px). Scoped to this page only, not a change to the shared token.
 * ------------------------------------------------------------------------- */
.pricing-page-shell{
  width:min(1440px, calc(100% - 80px));
  margin-inline:auto;
}
@media (max-width:640px){
  .pricing-page-shell{width:calc(100% - 32px);}
}

/* Nav: enlarge the shared logo mark and add a page-scoped "UK only" pill —
   scoped to body[data-page="pricing"] so no other page's topbar changes. */
body[data-page="pricing"] .app-topbar .brand svg{width:44px; height:44px;}
body[data-page="pricing"] .app-topbar .brand{font-size:19px; font-weight:800; gap:10px;}
.pricing-uk-pill{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border-subtle); border-radius:var(--radius-pill);
  padding:7px 14px; font-size:12.5px; font-weight:600; color:var(--text-secondary);
  background:var(--surface-soft); white-space:nowrap;
}

/* ---------------------------------------------------------------------------
 * Page backdrop — deep near-black with restrained teal/purple illumination.
 * ------------------------------------------------------------------------- */
body[data-page="pricing"]{
  background:
    radial-gradient(900px 560px at 78% 0%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 60%),
    radial-gradient(700px 500px at 92% 46%, color-mix(in srgb, #8b3fff 12%, transparent), transparent 65%),
    var(--bg);
}
:root[data-theme="light"] body[data-page="pricing"]{
  background:
    radial-gradient(900px 560px at 78% 0%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 60%),
    radial-gradient(700px 500px at 92% 46%, color-mix(in srgb, #8b3fff 6%, transparent), transparent 65%),
    var(--bg);
}

/* ---------------------------------------------------------------------------
 * Hero
 * ------------------------------------------------------------------------- */
.pricing-hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
  gap:36px;
  min-height:620px;
  padding:56px 0 40px;
  align-items:start;
  position:relative;
  overflow:hidden;
}
@media (max-width:900px){
  .pricing-hero{grid-template-columns:1fr; min-height:0; gap:32px; padding:28px 0 24px; overflow:visible;}
}

.pricing-hero__copy{padding-top:8px;}
.pricing-hero__eyebrow{
  font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--cyan); margin-bottom:18px;
}
.pricing-hero__headline{
  /* Capped at 60px (not the previous 68px) — the concept's three fixed
     semantic line breaks require "Fuel apps show prices." to fit on one
     line within the ~720px hero copy column; measured against the actual
     column width so it doesn't silently wrap onto a hidden fourth line. */
  font-size:clamp(34px, 4.1vw, 60px);
  line-height:1.08;
  font-weight:800;
  max-width:720px;
  letter-spacing:-0.01em;
}
/* Controlled desktop-only line breaks (three lines matching the concept);
   collapses to natural inline wrapping on mobile so narrow viewports never
   force an awkward third short line. */
.pricing-hero__line{display:block;}
@media (max-width:900px){
  .pricing-hero__line{display:inline;}
}
.pricing-hero__highlight{color:var(--cyan);}
.pricing-hero__sub{
  color:var(--text-secondary); font-size:clamp(16.5px,1.25vw,20px); line-height:1.5;
  margin-top:22px; max-width:600px;
}
.pricing-hero__actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:32px;}
.pricing-hero__actions .btn{
  flex-direction:column; align-items:flex-start; gap:3px; line-height:1.3;
  min-width:210px; min-height:64px; padding:13px 24px; font-size:15.5px;
}
.pricing-hero__actions .btn small{font-weight:500; font-size:12px; opacity:0.85;}
.pricing-hero__proof{color:var(--text-secondary); font-size:14px; margin-top:22px;}
.pricing-hero__proof b{color:var(--cyan); font-weight:700;}

/* Capability strip — one wide bordered panel, four equal columns. */
.pricing-capstrip{
  display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  background:var(--surface-card);
  margin-top:32px; max-width:650px;
  min-height:104px;
}
.pricing-capstrip__item{
  display:flex; align-items:flex-start; gap:12px;
  padding:20px 18px; border-left:1px solid var(--border-subtle);
}
.pricing-capstrip__item:first-child{border-left:none;}
.pricing-capstrip__icon{flex-shrink:0; width:26px; height:26px; margin-top:2px;}
.pricing-capstrip__icon svg{width:100%; height:100%;}
.pricing-capstrip__item:nth-child(1) .pricing-capstrip__icon{color:var(--cyan);}
.pricing-capstrip__item:nth-child(2) .pricing-capstrip__icon{color:var(--secondary);}
.pricing-capstrip__item:nth-child(3) .pricing-capstrip__icon{color:var(--secondary);}
.pricing-capstrip__item:nth-child(4) .pricing-capstrip__icon{color:var(--cyan);}
.pricing-capstrip__item strong{display:block; font-size:13.5px; font-weight:700;}
.pricing-capstrip__item span{display:block; font-size:12px; color:var(--text-secondary); margin-top:3px; line-height:1.4;}
@media (max-width:900px){ .pricing-capstrip{max-width:none;} }
@media (max-width:640px){
  .pricing-capstrip{grid-template-columns:1fr 1fr;}
  .pricing-capstrip__item:nth-child(3){border-left:none;}
}

/* ---------------------------------------------------------------------------
 * Hero product visual — static approved WebP asset (public/img/pricing/
 * pyls-pricing-phone-bp.webp), 1000×1600, transparent background, its own
 * pre-baked perspective/lighting/shadow. No CSS-built phone, no remote
 * image, no JS dependency. Desktop: absolutely positioned within a clipped
 * container so it can dominate/bleed toward the right edge and crop at the
 * bottom without inflating the hero's height (the grid row still sizes
 * only off the left copy column). Mobile: back to normal flow, full image
 * visible, no crop.
 * ------------------------------------------------------------------------- */
.pricing-hero__visual{
  position:relative; overflow:hidden;
  /* .pricing-hero uses align-items:start, so a grid item otherwise only
     takes the height of its own in-flow content — and this item's only
     child is position:absolute (intentionally out of flow, so it doesn't
     inflate the row height). Without an explicit stretch, the container
     collapses to 0px and overflow:hidden clips the image entirely. */
  align-self:stretch;
}
.pricing-phone-art{
  position:absolute; top:0; right:0;
  display:block;
  width:min(500px, 100%);
  height:auto;
  transform:translate(30px, 0px);
}
@media (max-width:900px){
  .pricing-hero__visual{
    position:static; overflow:visible; display:flex; justify-content:center; margin-top:8px;
  }
  .pricing-phone-art{
    position:static;
    width:min(340px,92vw);
    transform:none;
  }
}

/* ---------------------------------------------------------------------------
 * Pricing intro + billing toggle
 * ------------------------------------------------------------------------- */
.pricing-intro{
  text-align:center; padding:40px 0 8px; max-width:680px; margin-inline:auto;
  border-top:1px solid var(--border-subtle);
}
.pricing-intro h2{font-size:clamp(26px,3vw,34px); font-weight:800;}
.pricing-intro p{color:var(--text-secondary); font-size:17px; margin-top:12px; line-height:1.6;}

.billing-toggle{
  display:inline-flex; align-items:center; background:var(--panel2); border:1px solid var(--line);
  border-radius:100px; padding:5px; margin:28px auto 0; min-width:280px; justify-content:center;
}
.billing-toggle__opt{
  border:none; background:none; color:var(--text-secondary); padding:11px 20px; border-radius:100px;
  font-size:14px; font-weight:650; cursor:pointer; min-height:44px; display:inline-flex; align-items:center; gap:8px;
}
.billing-toggle__opt.sel{background:var(--panel); color:var(--text);}
/* Yearly is the plan we want selected — once picked, it gets the same
   teal→purple gradient identity as the Plus card/CTA elsewhere on this
   page, instead of the plain neutral panel Monthly gets, so "this is the
   smarter choice" reads instantly rather than needing the saving badge
   alone to carry it. */
.billing-toggle__opt[data-i="yearly"].sel{
  background:linear-gradient(120deg, color-mix(in srgb, var(--cyan) 22%, var(--panel)), color-mix(in srgb, #8b3fff 22%, var(--panel)));
  color:var(--text);
}
.billing-toggle__opt:focus-visible{outline:2px solid var(--cyan); outline-offset:2px;}
.billing-toggle__save{
  font-size:11px; font-weight:800; color:#fff; background:linear-gradient(120deg, #8b3fff, #6a2fd6);
  border-radius:100px; padding:3px 9px;
}
.billing-toggle__opt[data-i="yearly"].sel .billing-toggle__save{
  box-shadow:0 0 0 1px rgba(255,255,255,0.35);
}

.sim-banner{background:var(--primary-soft); border:1px solid var(--cyan); color:var(--cyan); border-radius:var(--radius-sm); padding:12px 16px; font-size:13px; margin:20px auto 0; max-width:680px; display:none; align-items:center; justify-content:space-between; gap:12px; text-align:left;}
.sim-banner.show{display:flex;}

/* ---------------------------------------------------------------------------
 * Plan cards
 * ------------------------------------------------------------------------- */
.tier-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:stretch; margin-top:36px;}
@media (max-width:820px){ .tier-grid{grid-template-columns:1fr;} }

/* Compact + premium: dropped the fixed min-height and cut padding roughly
   a third — the cards should size to their (now shorter) content, not
   reserve a fixed block of empty space, while keeping both cards' overall
   proportions matched (same padding/radius/list rhythm on both). */
.tier{
  display:flex; flex-direction:column; position:relative;
  padding:24px !important; border-radius:18px !important;
}
.tier__medallion{
  position:absolute; top:22px; right:22px; width:38px; height:38px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.tier__medallion svg{width:19px; height:19px;}
.tier.free .tier__medallion{background:color-mix(in srgb, var(--cyan) 16%, transparent); color:var(--cyan);}

.tier__name{font-weight:800; font-size:20px;}
.tier__positioning{color:var(--text-secondary); font-size:13.5px; margin-top:3px;}
.tier__price{font-size:34px; font-weight:800; font-variant-numeric:tabular-nums; margin-top:14px; color:var(--text-primary);}
.tier__price small{font-size:14px; font-weight:500; color:var(--text-secondary); margin-left:3px; vertical-align:baseline;}
.tier__period{font-size:13px; color:var(--text-secondary); margin-top:4px; min-height:17px; font-weight:600;}
/* Plus stays visually dominant even at the smaller, more compact base
   size — still a clear step up from Free's £0, just not the oversized
   52px the old taller card had room for. */
@media (min-width:640px){
  .tier.plus .tier__price{font-size:42px; letter-spacing:-0.015em;}
  .tier.plus .tier__price small{font-size:15.5px;}
}

.tier__list{list-style:none; padding:0; margin:16px 0; flex:1;}
.tier__list li{position:relative; padding-left:24px; font-size:14px; color:var(--text-secondary); line-height:1.85;}
/* Decorative check marks — CSS ::before generated content is never exposed
   to assistive tech, so this needs no explicit aria-hidden; a mask-image
   lets one small inline SVG be recoloured per card (teal Free / purple
   Plus) without needing a second asset. */
.tier__list li::before{
  content:""; position:absolute; left:0; top:7px; width:15px; height:15px;
  background-color:var(--cyan);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m6 17 7 7L26 9' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='m6 17 7 7L26 9' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.tier.plus .tier__list li::before{background:linear-gradient(135deg, var(--cyan), #a668ff);}
@media (min-width:900px){
  .tier.plus .tier__list{column-count:2; column-gap:20px;}
  .tier.plus .tier__list li{break-inside:avoid;}
  /* Free's five items split 3/2 across two columns with a divider, matching
     the Plus card's density rather than reading as a single long list. */
  .tier.free .tier__list--split{column-count:2; column-gap:24px; column-rule:1px solid var(--border-subtle);}
  .tier.free .tier__list--split li{break-inside:avoid;}
}

.tier.free{
  background:var(--surface-card); border:1px solid var(--border-subtle);
}

/* Plus — layered premium surface: a teal glow from the upper-left blending
   into a purple glow from the lower-right, over the shared dark card base. */
.tier.plus{
  background:
    radial-gradient(circle at 8% 4%, color-mix(in srgb, var(--cyan) 13%, transparent), transparent 38%),
    radial-gradient(circle at 92% 96%, color-mix(in srgb, #8b3fff 18%, transparent), transparent 45%),
    linear-gradient(145deg, color-mix(in srgb, var(--cyan) 5%, var(--surface-card)) 0%, var(--surface-card) 55%, color-mix(in srgb, #8b3fff 7%, var(--surface-card)) 100%);
  border:none;
  box-shadow:0 20px 50px -25px color-mix(in srgb, #8b3fff 45%, transparent);
}
/* Restrained gradient edge (teal upper-left → purple upper/lower-right)
   instead of a uniform outline — a padding-box/border-box mask keeps it to
   a ~1.5px ring with no layout shift. */
.tier.plus::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--cyan) 85%, white) 0%, color-mix(in srgb, var(--cyan) 40%, #a668ff) 45%, #a668ff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.tier.sim-active{outline:2px solid var(--cyan); outline-offset:2px;}

/* Plus medallion — larger, layered dark-purple surface with an inner glow
   and a faint outer ring, matching the concept's diamond treatment. */
.tier.plus .tier__medallion{
  width:56px; height:56px; top:20px; right:20px;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, #8b3fff 55%, transparent), color-mix(in srgb, #8b3fff 22%, transparent) 70%);
  box-shadow:0 0 0 1px color-mix(in srgb, #a668ff 45%, transparent), inset 0 0 16px -2px color-mix(in srgb, #a668ff 65%, transparent);
  color:#c9a3ff;
}
.tier.plus .tier__medallion svg{width:25px; height:25px;}

.tier-cta{
  min-height:52px; font-size:15px; font-weight:700; border-radius:14px; margin-top:6px;
}
.tier-cta--free{
  background:transparent; color:var(--cyan); border:1.5px solid color-mix(in srgb, var(--cyan) 45%, var(--border-subtle));
}
.tier-cta--free:hover:not([disabled]){background:color-mix(in srgb, var(--cyan) 10%, transparent);}
.tier-cta--free[disabled]{color:var(--text-secondary); border-color:var(--border-subtle); opacity:1;}
.tier-cta--plus{
  background:linear-gradient(110deg, var(--cyan) 0%, #4fb8e8 40%, #8b3fff 100%);
  color:#fff; border:none; font-weight:750;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.25), 0 14px 30px -14px color-mix(in srgb, #8b3fff 55%, transparent);
}
.tier-cta--plus:hover:not([disabled]){filter:brightness(1.08); transform:translateY(-1px);}
.tier-cta--plus:focus-visible{outline:2px solid #fff; outline-offset:2px;}
.tier-cta--plus.disabled-payment{background:var(--panel2); color:var(--text-secondary); box-shadow:none;}
.btn[disabled]{cursor:not-allowed;}

.notice{background:var(--surface-card); border:1px dashed var(--border-subtle); border-radius:14px; padding:20px; font-size:13.5px; color:var(--text-secondary); margin-top:28px; max-width:900px; margin-inline:auto;}

.pricing-cancel-line{text-align:center; color:var(--text-secondary); font-size:13.5px; margin-top:28px;}

/* ---------------------------------------------------------------------------
 * Trust strip — now follows the plan cards directly (the comparison table
 * that used to sit between them was removed per the approved concept: all
 * plan differences live in the Free/Plus cards themselves, not a separate
 * matrix). Margin trimmed accordingly so it doesn't read as a large gap
 * left behind by the removed section.
 * ------------------------------------------------------------------------- */
.trust-strip{
  display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:40px; border:1px solid var(--border-subtle); border-radius:20px; background:var(--surface-card);
}
.trust-strip__item{padding:26px 24px; border-left:1px solid var(--border-subtle);}
.trust-strip__item:first-child{border-left:none;}
.trust-strip__icon{width:26px; height:26px; color:var(--cyan); margin-bottom:12px;}
.trust-strip__icon svg{width:100%; height:100%;}
.trust-strip__item:last-child .trust-strip__icon{color:#a668ff;}
.trust-strip strong{display:block; font-size:14.5px; font-weight:700;}
.trust-strip span{display:block; font-size:13px; color:var(--text-secondary); margin-top:5px; line-height:1.5;}
@media (max-width:760px){
  .trust-strip{grid-template-columns:1fr 1fr;}
  .trust-strip__item:nth-child(3){border-left:none;}
}
@media (max-width:480px){
  .trust-strip{grid-template-columns:1fr;}
  .trust-strip__item{border-left:none; border-top:1px solid var(--border-subtle);}
  .trust-strip__item:first-child{border-top:none;}
}

/* ---------------------------------------------------------------------------
 * Closing line — above the shared small legal footer.
 * ------------------------------------------------------------------------- */
.pricing-closing-line{
  text-align:center; color:var(--text-secondary); font-size:13.5px;
  margin-top:32px;
}
.pricing-closing-line a{color:var(--cyan); text-decoration:none;}
.pricing-closing-line a:hover{text-decoration:underline;}

/* ---------------------------------------------------------------------------
 * Small overrides for the return-to-settings link inside the new wide shell
 * ------------------------------------------------------------------------- */
#return-to-settings-link{margin-top:20px;}