/* Shine: soft light on the desk. Loaded after depth.css on the desk page (index.html).
   A dot grid that fades out and a lime glow on the wallpaper, gradient-inked headlines, a tilted product shot, a CTA with a turning
   gradient rim, hairline cards that light up under the mouse (site.js sets --mx/--my; never on touch), crisp pricing cards,
   a "Works with" strip and the first-hello email card. Every color is a token per look, so Classic light and dark both hold contrast;
   lime highlights stay dark ink on lime. Motion stops under prefers-reduced-motion. */
:root{
  --glow:rgba(182,216,47,.34); --glow-2:rgba(23,25,27,.07); --glow-hi:rgba(150,185,20,.42);
  --dot:rgba(23,25,27,.17);
  --spot:rgba(182,216,47,.22); --spot-ring:rgba(110,140,10,.95);
  --rim:rgba(255,255,255,.9);
  --card-line:var(--line);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --glow:rgba(215,242,105,.12); --glow-2:rgba(0,0,0,.3); --glow-hi:rgba(215,242,105,.3);
  --dot:rgba(236,235,228,.09); --spot:rgba(215,242,105,.09); --spot-ring:rgba(215,242,105,.7); --rim:rgba(255,255,255,.07);
}}
:root[data-theme="dark"]{
  --glow:rgba(215,242,105,.12); --glow-2:rgba(0,0,0,.3); --glow-hi:rgba(215,242,105,.3);
  --dot:rgba(236,235,228,.09); --spot:rgba(215,242,105,.09); --spot-ring:rgba(215,242,105,.7); --rim:rgba(255,255,255,.07);
}

/* ---------- the desk wallpaper: fading dot grid and a lime glow ---------- */
.desk{background:var(--paper)}
.desk::before,.desk::after{content:"";position:absolute;inset:0;pointer-events:none}
.desk::before{background:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 1.6px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 80% 72% at 56% 34%,#000 18%,transparent 80%);mask-image:radial-gradient(ellipse 80% 72% at 56% 34%,#000 18%,transparent 80%)}
.desk::after{background:radial-gradient(40% 44% at 64% 10%,var(--glow),transparent 72%),radial-gradient(34% 40% at 4% 100%,var(--glow-2),transparent 72%)}


/* glassy menu bar */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .desk-body .menubar{background:color-mix(in srgb,var(--paper-2) 80%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
}


/* ---------- windows: the front one floats high on a soft, wide shadow; the rest sit back a little ---------- */
html:root .win{transition:opacity var(--mid),box-shadow var(--mid)}
html:root .win.active{box-shadow:inset 0 1px 0 var(--rim),0 2px 0 var(--edge-soft),0 26px 50px -20px var(--amb2),0 80px 130px -46px var(--amb)}
html:root .win:not(.active){box-shadow:inset 0 1px 0 var(--hi),0 1px 0 var(--edge-soft),0 18px 34px -22px var(--amb2)}
html:root .win:not(.active)>.body{filter:saturate(.72)}
html:root .win:not(.active) .tb{background:var(--win)}





html:root body.phone .win:not(.active)>.body{filter:none}

/* ---------- headlines: ink that fades to the lower right; lime highlights stay dark ink on lime ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)) and (color:color-mix(in srgb,red 50%,transparent)){
  .start h1,.start-more h2,.win .page .section>h2,.t-h{
    background-image:linear-gradient(to right bottom,var(--ink) 38%,color-mix(in srgb,var(--ink) 62%,transparent));
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .start h1 em{color:var(--lime-ink);-webkit-text-fill-color:var(--lime-ink)}
}
@media (forced-colors:active){.start h1,.start-more h2,.win .page .section>h2,.t-h{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* ---------- Start: the hero ---------- */
.start{position:relative;isolation:isolate;padding:12px 0 8px}
.start::before{content:"";position:absolute;z-index:-1;left:0;top:-36px;width:64%;height:118%;pointer-events:none;background:radial-gradient(closest-side,var(--glow),transparent)}
.start::after{content:"";position:absolute;z-index:-1;right:0;top:-30px;width:58%;height:120%;pointer-events:none;
  background:radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 1.6px) 0 0/18px 18px;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent)}
.start .eyebrow.pill{display:inline-flex;align-items:center;gap:8px;padding:5px 13px 5px 10px;margin-bottom:16px;border-radius:999px;border:1px solid transparent;
  font-size:12.5px;letter-spacing:.1em;color:var(--ink-2);
  background:linear-gradient(var(--win),var(--win)) padding-box,linear-gradient(100deg,var(--lime),var(--card-line) 40%,var(--card-line) 65%,var(--lime)) border-box;
  box-shadow:0 6px 18px -10px var(--glow-hi)}
.start .eyebrow.pill::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px var(--lime-soft)}
.start h1{font-size:clamp(28px,4.7cqi,50px);line-height:1.24;letter-spacing:-.045em;margin:0 0 14px}
.start .lead{font-size:clamp(15.5px,1.75cqi,17.5px);margin:0 0 22px}
.start .fine{margin-top:16px}
.start .keys{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:12px;color:var(--muted)}
kbd{font-family:var(--mono);font-size:12.5px;font-weight:600;line-height:1.5;min-width:20px;text-align:center;padding:0 5px;border:1px solid var(--card-line);border-radius:5px;background:var(--win);color:var(--ink);
  box-shadow:inset 0 1px 0 var(--rim),inset 0 -1px 0 var(--lo),0 1px 0 var(--edge-soft)}
body.phone .start .keys{display:none}
@media (pointer:coarse){.start .keys{display:none}}

/* the product shot, framed and tilted toward the words, on a soft glow */
.start .hero-frame{border-radius:12px;transform:perspective(1700px) rotateY(-11deg) rotateX(4deg) rotateZ(.4deg);transform-origin:0 50%;
  box-shadow:inset 0 1px 0 var(--rim),0 2px 0 var(--edge-soft),40px 50px 90px -40px var(--amb),0 0 90px -30px var(--glow-hi);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease);animation:hero-in .9s .12s cubic-bezier(.2,.8,.2,1) both}
@media (hover:hover){.start .hero-frame:hover{transform:perspective(1700px) rotateY(-4deg) rotateX(1.5deg)}}
@keyframes hero-in{from{opacity:0;transform:perspective(1700px) rotateY(-22deg) rotateX(8deg) translate3d(30px,16px,0)}}
@media (max-width:1000px){.start .hero-frame{transform:perspective(1700px) rotateX(5deg);transform-origin:50% 0;max-width:640px}}


/* the main CTA: a key with a slowly turning gradient rim */
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg}
html:root .btn.glow-btn{border:2px solid transparent;
  background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,0) 65%) padding-box,linear-gradient(var(--lime),var(--lime)) padding-box,
    conic-gradient(from var(--spin),var(--line) 0 52%,#fff 64%,var(--lime) 72%,var(--line) 86%) border-box;
  animation:spin 4.5s linear infinite}

@keyframes spin{to{--spin:360deg}}

/* ---------- Start: below the hero ---------- */
.start-more{display:grid;gap:22px;margin-top:34px}
.start-more>*{min-width:0}
.start-more h2{font-size:clamp(22px,3.1cqi,30px);letter-spacing:-.035em;margin:0}
.start-more h3{font-size:clamp(19px,2.3cqi,23px);letter-spacing:-.03em;margin:0 0 8px}
.start-more .eyebrow{margin-bottom:6px}
.start-more .quiet{font-family:var(--display);font-weight:600;font-size:14.5px;color:var(--ink);text-underline-offset:3px;padding:6px 4px;margin-left:-4px}
.start-more .quiet:hover{background:var(--lime);color:var(--lime-ink);border-radius:4px}

/* "Works with": plain-text names, no logos, between two fading hairlines */
.proof{display:flex;align-items:center;flex-wrap:wrap;gap:10px 22px;padding:16px 4px;
  background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent) top/100% 1px no-repeat,linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent) bottom/100% 1px no-repeat}
.proof-k{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.proof-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;flex:1;min-width:0}
.proof-list li{font-family:var(--display);font-weight:700;font-size:17px;letter-spacing:-.025em;color:var(--muted);transition:color var(--fast)}
.proof-list li:hover{color:var(--ink)}

/* a day with PRFKT ADS: six moments on a time line; each opens How it works at that screen (the demo tells the story with pictures) */
.day-head{display:grid;gap:4px}
.day-note{margin:4px 0 0;font-size:13.5px;color:var(--muted)}
.day-note a{color:var(--ink-2)}
.day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:2px solid var(--line);position:relative}
.day li{min-width:0;position:relative}
.day li::before{content:"";position:absolute;left:12px;top:-7px;width:12px;height:12px;border-radius:50%;background:var(--lime);border:2px solid var(--line);box-sizing:border-box}
.day button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:3px;align-content:start;width:100%;height:100%;padding:16px 12px 14px;border-radius:0 0 10px 10px;transition:background var(--fast)}
.day button:hover{background:color-mix(in srgb,var(--lime) 12%,transparent)}
.day button:focus-visible{outline:2px solid var(--lime);outline-offset:-2px}
.day-t{font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.day b{font-family:var(--display);font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.day span:not(.day-t){font-size:13.5px;line-height:1.45;color:var(--ink-2)}
@container page (max-width:620px){.day{grid-template-columns:1fr;border-top:0;border-left:2px solid var(--line);margin-left:6px}.day li::before{left:-7px;top:18px}.day button{padding:12px 12px 12px 18px;border-radius:0 10px 10px 0}}
@media (prefers-reduced-motion:reduce){.day button{transition:none}}

/* three ways to do the same job: a quiet table, PRFKT ADS lit */
.vs{display:grid;gap:10px}
.vs-wrap{overflow-x:auto;border:1px solid var(--card-line);border-radius:12px;background:var(--win);box-shadow:inset 0 1px 0 var(--rim),0 2px 0 var(--edge-soft)}
.vs-wrap:focus-visible{outline:2px solid var(--lime);outline-offset:2px}
.vs-table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.vs-table th,.vs-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hair);line-height:1.4}
.vs-table tbody tr:last-child>*{border-bottom:0}
.vs-table thead th{font-family:var(--display);font-size:14px;color:var(--ink)}
.vs-table tbody th{font-family:var(--display);font-weight:700;font-size:13.5px;color:var(--ink);width:22%}
.vs-table td{color:var(--ink-2)}
.vs-table .vs-us{background:color-mix(in srgb,var(--lime) 14%,transparent);color:var(--ink)}
.vs-table thead .vs-us{background:var(--lime);color:var(--lime-ink)}
.vs .row{margin-top:4px}

/* the first hello: a dark, code-style email card with the filled-in details highlighted */
.hello-row{display:grid;gap:20px;align-items:center}
@container page (min-width:760px){.hello-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:30px}}
.hello-copy p{font-size:15px;color:var(--ink-2)}
.hello{margin:0;border-radius:14px;overflow:hidden;background:#0f1211;color:#e6e8e1;border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 2px 0 var(--edge-soft),0 34px 60px -30px var(--amb),0 0 70px -34px var(--glow-hi);
  --spot:rgba(215,242,105,.08);--spot-ring:rgba(215,242,105,.6)}

.hello-tb{display:flex;align-items:center;gap:10px;height:30px;padding:0 12px;border-bottom:1px solid rgba(255,255,255,.09);font-family:var(--mono);font-size:12.5px;color:#a3aa9f;background:rgba(255,255,255,.03)}
.hello-tb .stripes{flex:1;height:9px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px)}
.hello pre{margin:0;padding:16px 18px;font-family:var(--mono);font-size:13px;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;color:#e6e8e1}
.hello .k{color:#959c91}
.hello .f{color:#141a00;background:#d7f269;border-radius:3px;padding:0 2px}
.hello .s{color:#cdb9ff}
.hello-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 16px;border-top:1px solid rgba(255,255,255,.09);font-family:var(--mono);font-size:12.5px;color:#a3aa9f}
.hello-foot i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:0}
.hello-foot .dot-f{background:#d7f269}.hello-foot .dot-s{background:#cdb9ff}
.hello-sample{margin-left:auto}
body.phone .hello pre{font-size:12px;padding:14px}

/* ---------- spotlight: hairline cards that light up under the mouse ---------- */
:is(.tier,.hello,.contact .card,.payg){position:relative;isolation:isolate}
:is(.tier,.hello,.contact .card,.payg)::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 70%)}
:is(.tier,.hello,.contact .card,.payg)::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),var(--spot-ring),transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
@media (hover:hover) and (pointer:fine){
  :is(.tier,.hello,.contact .card,.payg):hover::before,:is(.tier,.hello,.contact .card,.payg):hover::after{opacity:1}
}

/* ---------- pricing ---------- */
.billing{border-radius:999px;padding:3px;gap:2px;background:var(--win);border-color:var(--card-line);box-shadow:inset 0 1px 0 var(--rim),0 1px 0 var(--edge-soft)}
.billing .seg{border-radius:999px;background:transparent}
.billing .seg+.seg{border-left:0}
html:root .tier{border-radius:14px;padding:22px 20px 20px;gap:14px;border-color:var(--card-line);background:linear-gradient(180deg,var(--win),var(--paper-2) 150%);
  box-shadow:inset 0 1px 0 var(--rim),0 2px 0 var(--edge-soft),0 18px 34px -20px var(--amb2),0 40px 70px -40px var(--amb)}
.tier h3{font-size:15px;letter-spacing:-.01em;color:var(--ink-2)}
.tier .price{padding-bottom:14px;border-bottom:1px solid var(--hair);row-gap:4px}
.tiers.five .tier .price .num{font-size:38px;letter-spacing:-.045em}
.tier li{padding-left:24px}
.tier li::before{left:0;top:3px;width:16px;height:16px;border-radius:50%;background:var(--lime-soft);border:1px solid color-mix(in srgb,var(--lime) 70%,var(--line))}
.tier li::after{content:"";position:absolute;left:6px;top:6.5px;width:4px;height:7.5px;border:solid var(--ink);border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}
html:root .tier.featured{outline:0;border-color:var(--line);
  background:radial-gradient(120% 60% at 50% -8%,var(--lime-soft),transparent 62%),linear-gradient(180deg,var(--win),var(--paper-2) 150%);
  box-shadow:0 0 0 2px var(--lime),inset 0 1px 0 var(--rim),0 2px 0 var(--edge-soft),0 24px 70px -22px var(--glow-hi),0 40px 70px -40px var(--amb)}

.tier.featured h3{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--ink)}
.tier.featured h3::after{content:"Our pick";font-family:var(--mono);font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--lime);color:var(--lime-ink);border:1px solid var(--line);border-radius:999px;padding:2px 8px;white-space:nowrap}
.tier.featured li::before{background:var(--lime)}
.tier.featured li::after{border-color:var(--lime-ink)}
@media (hover:hover){html:root .tier:hover{box-shadow:inset 0 1px 0 var(--rim),0 3px 0 var(--edge-soft),0 26px 44px -20px var(--amb2),0 50px 80px -40px var(--amb)}
  html:root .tier.featured:hover{box-shadow:0 0 0 2px var(--lime),inset 0 1px 0 var(--rim),0 3px 0 var(--edge-soft),0 30px 80px -20px var(--glow-hi),0 50px 80px -40px var(--amb)}}
.payg,.compare-wrap{border-radius:14px;border-color:var(--card-line)}
html:root .payg,html:root .compare-wrap{box-shadow:inset 0 1px 0 var(--rim),0 2px 0 var(--edge-soft),0 20px 40px -26px var(--amb)}
.faq details,.t-dfy>div,.t-plans button:not(.on),.t-thumb){border-color:var(--card-line)}
html:root .card{border-radius:12px}

/* ---------- the tour ---------- */
.t-media{isolation:isolate}
.t-media::before{content:"";position:absolute;inset:6% 4% -8%;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,var(--glow),transparent)}
.t-media .frame:not(.t-phone){border-radius:12px;box-shadow:inset 0 1px 0 var(--rim),0 2px 0 var(--edge-soft),0 30px 60px -30px var(--amb)}

.t-rail button.on{background:linear-gradient(180deg,var(--lime-soft),transparent 75%)}


/* ---------- reveal: a little longer and softer than before ---------- */
.rise{transform:translateY(14px);filter:blur(3px);transition:opacity .5s ease-out,transform .6s cubic-bezier(.2,.8,.2,1),filter .5s ease-out}
.rise.in{filter:none}

@media (prefers-reduced-motion:reduce){
  .glow-btn,html:root .glow-btn,.start .hero-frame{animation:none}
  .start .hero-frame,.rise{transition:none}
  .rise{filter:none;transform:none}
}

/* narrow windows: the "Works with" label sits above the names; the eyebrow pill stays on one line where it can */
@container page (max-width:620px){
  .proof{gap:8px 18px}
  .proof-k{flex-basis:100%}
  .proof-list{gap:6px 18px}
  .proof-list li{font-size:15.5px}
  .start .eyebrow.pill{letter-spacing:.06em;font-size:12.5px}
}
.tier ul{align-content:start}

/* ======================================================================================================================================
   Touch shine: the same light, visible without a mouse (phones and tablets), and a little more of it on desktop.
   - Cards carry a lit top-left hairline edge and (touch) a fixed soft light in the top-left corner; a tap lights the card from the tap
     point (shine.js adds .lit and sets --mx/--my), the same glow a mouse gets on hover.
   - Headlines: a top-lit "metal" ink gradient whose lightest stop stays ≥5:1 on its paper (solid colour where background-clip:text is
     missing). Lime highlights stay solid dark ink on lime.
   - Window pages get a faint line grid and glow behind their first screen; the desk's icon labels become hairline pills.
   - Press: buttons, icons, tabs and segments sink to 98% with a soft lime glow on tap. The main CTAs catch a slow light sweep once every
     7 s. Nothing here moves under prefers-reduced-motion, and nothing sits on top of text. */
:root{
  --edge-lit:rgba(140,175,15,.8); --st-spot:rgba(182,216,47,.3); --press-glow:rgba(150,185,20,.5);
  --grid-line:rgba(23,25,27,.055); --sweep:rgba(255,255,255,.62);
  --metal-lo:color-mix(in srgb,var(--ink) 64%,transparent);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --edge-lit:rgba(215,242,105,.55); --st-spot:rgba(215,242,105,.075); --press-glow:rgba(215,242,105,.38); --grid-line:rgba(236,235,228,.045);
}}
:root[data-theme="dark"]{
  --edge-lit:rgba(215,242,105,.55); --st-spot:rgba(215,242,105,.075); --press-glow:rgba(215,242,105,.38); --grid-line:rgba(236,235,228,.045);
}

/* ---------- cards: a lit top-left edge always; the mouse/tap spotlight takes over when lit ---------- */
:is(.tier,.hello,.contact .card,.payg)::after{opacity:1;background:linear-gradient(155deg,var(--edge-lit),transparent 34%)}
.hello{--edge-lit:rgba(215,242,105,.55)}
@media (hover:hover) and (pointer:fine){
  :is(.tier,.hello,.contact .card,.payg):hover::after{background:radial-gradient(180px circle at var(--mx,50%) var(--my,0%),var(--spot-ring),transparent 72%)}
}
/* touch: a fixed soft light in the corner instead of a light that follows a pointer */
@media (hover:none){
  :is(.tier,.hello,.contact .card,.payg)::before{opacity:1;background:radial-gradient(130% 75% at 0% 0%,var(--st-spot),transparent 62%)}
  .hello::before{background:radial-gradient(130% 75% at 0% 0%,rgba(215,242,105,.08),transparent 62%)}
}
:is(.tier,.hello,.contact .card,.payg).lit::before{opacity:1;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),var(--spot),transparent 70%)}
:is(.tier,.hello,.contact .card,.payg).lit::after{opacity:1;background:radial-gradient(170px circle at var(--mx,50%) var(--my,0%),var(--spot-ring),transparent 72%)}

/* ---------- headlines: top-lit metal ink ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)) and (color:color-mix(in srgb,red 50%,transparent)){
  .start h1,.start-more h2,.win .page .section>h2,.t-h{background-image:linear-gradient(172deg,var(--ink) 30%,var(--metal-lo) 108%)}
}

/* ---------- window pages: a faint line grid and a glow behind the top of the page ---------- */
.win .page{background:
  linear-gradient(180deg,transparent 0,var(--paper-2) 300px) 0 0/100% 100% no-repeat,
  radial-gradient(60% 240px at 0% 0%,var(--st-spot),transparent 70%) 0 0/100% 100% no-repeat,
  linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/32px 32px}
.win .page:has(.start){background:
  linear-gradient(180deg,transparent 0,var(--paper-2) 420px) 0 0/100% 100% no-repeat,
  linear-gradient(var(--grid-line) 1px,transparent 1px) 0 0/32px 32px,
  linear-gradient(90deg,var(--grid-line) 1px,transparent 1px) 0 0/32px 32px}

/* the hero on a phone: the glow sits behind the headline and fills the width */
@media (max-width:700px){
  .start::before{width:110%;left:-20%;top:-60px;height:90%}
  .start::after{width:90%;top:-40px;height:80%}
}

/* ---------- the intro note and the Psst note: a lit corner and hairline, no change to their text ---------- */
.intro-note,.psst-note{background-image:radial-gradient(120% 60% at 0% 0%,var(--st-spot),transparent 62%)}


/* ---------- desk icons: hairline pill labels, a top light ---------- */
html:root .icon span{border-radius:999px;border-color:var(--hair);
  background:linear-gradient(180deg,color-mix(in srgb,var(--win) 92%,transparent),color-mix(in srgb,var(--paper-2) 80%,transparent));box-shadow:inset 0 1px 0 var(--rim)}
html:root .icon:hover span,html:root .icon:focus-visible span{background:var(--lime);color:var(--lime-ink);border-color:var(--line)}

/* ---------- press: sink to 98% with a soft lime glow (touch: on every tap; mouse keeps its offset press) ---------- */
@media (hover:none){
  html:root :is(.btn,.dock .tab,.psst-go,.intro-self,.intro-look button,.t-rail button,.t-plans button,.billing .seg,.login-pin .btn){transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s}
  html:root body :is(.btn,.dock .tab,.psst-go,.intro-look button,.t-rail button,.t-plans button,.billing .seg,.login-pin .btn):active{
    transform:scale(.98);box-shadow:inset 0 1px 2px var(--lo),0 0 0 3px var(--lime-soft),0 0 22px -4px var(--press-glow)}
  html:root body .icon:active span{background:var(--lime);color:var(--lime-ink);border-color:var(--line);box-shadow:0 0 0 3px var(--lime-soft),0 0 18px -2px var(--press-glow)}
  html:root body .icon:active svg{transform:scale(.94)}
  :is(.tier,.contact .card,.payg){transition:transform .18s cubic-bezier(.2,.8,.2,1)}
  :is(.tier,.contact .card,.payg).lit{transform:scale(.99)}
}

/* ---------- the main CTAs: a slow light sweep, once every 7 s (under the label, so the text never changes) ---------- */
.btn:is(.primary,.glow-btn){position:relative;isolation:isolate}
.btn:is(.primary,.glow-btn)::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,var(--sweep) 50%,transparent 62%) no-repeat;background-size:260% 100%;background-position:130% 0;
  animation:sheen 7s 1.4s cubic-bezier(.4,0,.2,1) infinite}
@keyframes sheen{0%{background-position:130% 0}17%,100%{background-position:-30% 0}}
.win:not(.active) .btn:is(.primary,.glow-btn)::after{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){
  .btn:is(.primary,.glow-btn)::after{animation:none;display:none}
  html:root body :is(.btn,.dock .tab,.psst-go,.intro-look button,.t-rail button,.t-plans button,.billing .seg,.login-pin .btn):active,
  :is(.tier,.contact .card,.payg).lit,html:root body .icon:active svg{transform:none}
}
@media (forced-colors:active){.btn:is(.primary,.glow-btn)::after,:is(.tier,.hello,.contact .card,.payg)::after{display:none}}