/* spekko.ai, the quality pass (CORA 10/30, Justin: "website looks like shit and tacky ... lets upgrade the quality of
   this 10-fold"). One layer, loaded last on every marketing page, that brings the inner pages up to the home: editorial
   type at a real size, page heads on a full-width pearl sheen with Spekko big enough to read, roomier cards with one
   consistent depth, a closing band, and a calmer footer. No new colours: pearl, ink, and his own glow. */
:root { --c-ink: #17131a; --c-text: #3b4150; --c-mute: #5b6272; --c-hair: rgb(23 19 26 / 8%);
  --c-depth: 0 0 0 1px rgb(23 19 26 / 6%), 0 2px 4px rgb(23 19 26 / 4%), 0 36px 72px -44px rgb(40 30 80 / 42%);
  --c-sheen: radial-gradient(55% 80% at 4% 0%, rgb(252 232 243 / 85%) 0%, rgb(252 232 243 / 0%) 70%),
    radial-gradient(50% 90% at 100% 0%, rgb(224 238 255 / 95%) 0%, rgb(224 238 255 / 0%) 70%),
    radial-gradient(60% 80% at 60% 110%, rgb(226 248 240 / 85%) 0%, rgb(226 248 240 / 0%) 70%), #f7f8fb; }
.page main, .help-page main, .beta main { overflow-x: clip; }
.page, .help-page, .beta { color: var(--c-text); }
.page .top, .help-page .top, .beta .top { position: sticky; top: 0; z-index: 40; background: rgb(247 248 251 / 84%);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); box-shadow: 0 1px 0 var(--c-hair); }

/* ---- the page head: the claim, big, on the sheen; Spekko on a halo ---- */
.page .page-head { position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 5vw, 96px);
  padding-block: clamp(72px, 9vw, 136px) clamp(64px, 8vw, 120px); margin-bottom: clamp(56px, 6vw, 96px); }
.page .page-head::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -2; background: var(--c-sheen); border-bottom: 1px solid var(--c-hair); }
.page .page-head::after { content: ""; position: absolute; right: 0; top: 50%; width: clamp(300px, 30vw, 460px); aspect-ratio: 1; transform: translate(8%, -50%); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 96%), rgb(225 236 255 / 60%) 45%, rgb(252 232 243 / 0%)); }
.page .page-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(52px, 6.2vw, 96px); line-height: .96; letter-spacing: -0.045em; max-width: 13ch; color: var(--c-ink); }
.page .page-head .lede { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; color: var(--c-text); margin-top: 28px; max-width: 44ch; }
.page .page-spk { width: clamp(190px, 20vw, 300px); filter: drop-shadow(0 30px 34px rgb(40 30 80 / 24%)); }

/* ---- type and rhythm on the inner pages ---- */
.page .section h2, .page .sp-head h2, .page .pillar h2, .page .feature h2, .page .faq-wrap h2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.04em; color: var(--c-ink); }
.page .section h2, .page .sp-head h2 { font-size: clamp(38px, 4.2vw, 60px); line-height: 1; }
.page .feature h2, .page .pillar h2 { font-size: clamp(34px, 3.4vw, 52px); line-height: 1.02; }
.page .sub, .page .feature p, .page .pillar p { font-size: 18px; line-height: 1.65; color: var(--c-text); }
.page .ticks li { font-size: 17px; }
.page .fine { font-size: 15.5px; }
.page .jump { gap: 10px; padding-bottom: clamp(64px, 7vw, 112px); }
.page .jump a { font-size: 15px; padding: 12px 18px; box-shadow: var(--c-depth); border: 0; }

/* ---- cards: one depth everywhere ---- */
.page .feature-art, .page .app, .page .points li, .page .sp-card, .page .ldr, .help-page .hcards a, .page .demo, .page .blueprint {
  border: 0 !important; border-radius: 28px; box-shadow: var(--c-depth); }
.page .feature-art { min-height: 400px; background: var(--c-sheen); }
.page .app { padding: clamp(32px, 3vw, 44px); }
.page .app h2 { font-family: var(--display); font-weight: 800; font-size: 38px; letter-spacing: -0.035em; }
.page .app li { font-size: 16.5px; }
.page .rules li { padding: 28px 0; }
.page .rules b { font-size: 19px; color: var(--c-ink); }
.page .rules span { font-size: 16.5px; }

/* ---- the FAQ: a real reading column ---- */
.page .faq-wrap { gap: clamp(32px, 5vw, 96px); padding-bottom: clamp(56px, 6vw, 96px); }
.page .faq-wrap h2 { font-size: clamp(30px, 2.8vw, 42px); position: sticky; top: 110px; }
.page .faq summary { font-size: 19px; padding-block: 26px; color: var(--c-ink); }
.page .faq p { font-size: 17px; line-height: 1.65; }

/* ---- the closing band: a pearl card, Spekko big, the invite ---- */
.page .closing { position: relative; isolation: isolate; margin-block: clamp(32px, 4vw, 64px) clamp(72px, 8vw, 120px); padding-block: clamp(72px, 9vw, 128px);
  border-radius: 40px; background: var(--c-sheen); box-shadow: var(--c-depth); overflow: hidden; }
.page .closing .close-spk { width: clamp(150px, 14vw, 210px); height: auto; margin-bottom: 26px; }
.page .closing h2 { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 5.6vw, 84px); letter-spacing: -0.045em; line-height: .96; }
.page .closing .sub { font-size: 19px; max-width: 44ch; }
.page .closing .btn-ink, .help-page .btn-ink { margin-top: 32px; font-size: 16px; padding: 17px 26px; box-shadow: 0 1px 2px rgb(23 19 26 / 20%), 0 12px 26px -12px rgb(23 19 26 / 55%); }

/* ---- the footer ---- */
.page .foot, .help-page .foot, .beta .foot { padding-block: 36px 56px; font-size: 14.5px; border-top: 1px solid var(--c-hair); }

/* ---- the help center: the same head and cards ---- */
.help-page .hhero { max-width: none; display: grid; justify-items: center; position: relative; padding: clamp(64px, 7vw, 104px) clamp(24px, 4vw, 56px) clamp(52px, 5vw, 80px); margin-top: 16px; border-radius: 36px; background: var(--c-sheen); box-shadow: var(--c-depth); }
.help-page .hhero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 5.6vw, 84px); letter-spacing: -0.045em; line-height: .96; color: var(--c-ink); }
.help-page .hhero .lede { font-size: 20px; max-width: 46ch; }
.help-page .hhero .hsearch { width: min(640px, 100%); }
.help-page .hsearch input { height: 60px; font-size: 17px; border-radius: 999px; box-shadow: var(--c-depth); border: 0; }
.help-page .hsection { margin-top: clamp(48px, 5vw, 72px); }
.help-page .hsection h2 { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -0.03em; color: var(--c-ink); }
.help-page .hcards { gap: 18px; }
.help-page .hcards a { padding: 28px 28px 30px; background: #fff; }
.help-page .hcards b { font-size: 19px; }
.help-page .hcards span { font-size: 15.5px; line-height: 1.55; }
.help-page .article h1 { font-family: var(--display); font-weight: 800; font-size: clamp(44px, 4.6vw, 68px); letter-spacing: -0.04em; line-height: 1; color: var(--c-ink); }
.help-page .article .lede { font-size: 20px; }
.help-page .article h2 { font-family: var(--display); font-weight: 800; font-size: 30px; letter-spacing: -0.03em; margin-top: 52px; color: var(--c-ink); }
.help-page .article p, .help-page .article li { font-size: 17.5px; line-height: 1.7; }

/* ---- the beta form page ---- */
.beta .beta-head h1 { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 5.6vw, 84px); letter-spacing: -0.045em; line-height: .96; color: var(--c-ink); }
.beta .beta-head .lede { font-size: 20px; max-width: 46ch; }
.beta .beta-grid .sms-form { border-radius: 28px; box-shadow: var(--c-depth); border: 0; padding: clamp(28px, 3vw, 44px); }

@media (max-width: 760px) {
  .page .demo { padding-bottom: 52px; }
  .page .page-head { grid-template-columns: minmax(0, 1fr); padding-block: 56px 48px; }
  .page .page-head::after { top: auto; bottom: 0; width: 300px; transform: translate(10%, 20%); }
  .page .page-spk { width: 150px; justify-self: end; margin-top: -24px; }
  .page .closing { border-radius: 28px; }
  .page .faq-wrap h2 { position: static; }
}