/* 오답노트AI 랜딩 — 앱과 같은 결(순수 블랙·브랜드 그라디언트)로,
   형제 앱 Dayset(daysetapp.com) 수준의 마감을 기준으로 삼는다:
   웹폰트 · 실물 기기 프레임 · 플로팅 네비 · 스크롤 리빌 · 넉넉한 여백. */

:root {
  --accent: #5E8BFF;
  --ink: rgba(255, 255, 255, 0.94);
  --ink-2: rgba(255, 255, 255, 0.56);
  --ink-3: rgba(255, 255, 255, 0.34);
  --line: rgba(255, 255, 255, 0.08);
  --card: rgba(255, 255, 255, 0.04);

  /* 세로 리듬 — 값을 세 개로만 둔다. 섹션 > 행 > 제목→내용 순으로 좁아지고,
     이 순서가 깨지면 "무엇이 한 덩어리인지"가 안 읽힌다.
     전부 clamp라 좁은 화면에서 자동으로 줄어든다(미디어쿼리로 다시 안 쓴다) */
  --gap-section: clamp(78px, 11vw, 124px);  /* 섹션 사이 */
  --gap-row: clamp(56px, 8vw, 88px);        /* 같은 섹션 안의 행 사이 */
  --gap-head: clamp(38px, 5.5vw, 60px);     /* 제목 → 첫 내용 */
}

html { scroll-behavior: smooth; }

body.landing-body {
  background: #050505;
  color: var(--ink);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  line-height: 1.6;
  word-break: keep-all;
}
/* ⚠️ 가로 여백은 **롱핸드**로 준다. `padding: 0 28px` 단축을 쓰면
   `.landing-body .wrap`(0,2,0)이 `.landing-body section`(0,1,1)을 이겨
   섹션의 세로 패딩까지 0으로 덮어쓴다 — 섹션 간격이 통째로 사라졌던 원인 */
.landing-body .wrap {
  max-width: 1040px; margin: 0 auto;
  padding-left: 28px; padding-right: 28px;
}
::selection { background: rgba(94, 139, 255, 0.35); }

/* 스크롤 리빌 — 한 번에 다 보이면 읽는 순서가 사라진다 */
.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity 0.8s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.8s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ── 플로팅 필 네비 ── */
.navbar {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: center; padding: 0 16px; pointer-events: none;
}
.pillbar {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: nowrap; white-space: nowrap; max-width: 100%;
  background: rgba(16, 16, 17, 0.72);
  backdrop-filter: blur(22px) saturate(1.5);
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 999px; padding: 9px 10px 9px 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
}
/* 워드마크 — **앱 아이콘 그대로** 쓴다. 체크 획만 떼어내면 서비스가 아니라
   무슨 표시처럼 읽힌다(홈 화면에서 보게 될 모습이 곧 브랜드다) */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--ink); text-decoration: none; margin-right: 8px;
}
/* 아이콘 배경이 거의 검정이라 어두운 바탕 위에선 **타일이 사라지고 체크만 뜬다**(실측).
   테두리를 한 겹 그어 "앱 아이콘"으로 읽히게 한다 */
.wordmark img {
  width: 27px; height: 27px; border-radius: 8px; display: block;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.wordmark span { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; }
.pillbar a.link {
  color: var(--ink-2); text-decoration: none; font-size: 14.5px; font-weight: 600;
  padding: 9px 13px; border-radius: 999px;
  transition: color 0.2s, background 0.2s; white-space: nowrap; flex: none;
}
.pillbar a.link:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
/* 상단 다운로드 칩 — 스크롤 위치와 무관하게 항상 스토어로 가는 길이 하나 열려 있게 */
.pillbar .soon {
  font-size: 13.5px; font-weight: 700; color: #9FB4FF; text-decoration: none;
  border: 1px solid rgba(94, 139, 255, 0.32);
  background: rgba(94, 139, 255, 0.1);
  padding: 9px 15px; border-radius: 999px; flex: none; white-space: nowrap;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.pillbar .soon:hover {
  color: #fff; background: rgba(94, 139, 255, 0.22); border-color: rgba(94, 139, 255, 0.55);
}

/* ── 히어로 ── */
header { position: relative; padding: clamp(118px, 15vw, 150px) 0 0; text-align: center; overflow: hidden; }
header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 38% at 50% 14%, rgba(61, 99, 242, 0.2), transparent 70%),
    radial-gradient(70% 50% at 50% 0%, rgba(124, 106, 249, 0.08), transparent 70%);
}
header h1 {
  position: relative; color: var(--ink);
  font-size: clamp(34px, 6.2vw, 62px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.24;
}
header h1 em {
  font-style: normal;
  background: linear-gradient(104deg, #22C9F5 0%, #5E8BFF 52%, #7C6AF9 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
header .sub {
  position: relative; margin: 22px auto 0; max-width: 560px;
  color: var(--ink-2); font-size: clamp(15px, 2vw, 18px); line-height: 1.75;
}

.cta-row {
  position: relative; display: flex; justify-content: center;
  margin-top: 30px;
}
/* App Store 배지 — 스토어로 바로 가는 링크(히어로·아웃트로 두 곳) */
.store-badge {
  display: inline-flex; align-items: center; gap: 11px;
  background: #fff; color: #000; border: 0; text-decoration: none;
  border-radius: 14px; padding: 11px 22px 11px 17px;
  font-family: inherit; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 14px 40px rgba(255, 255, 255, 0.18); }
.store-badge:active { transform: translateY(0); }
.store-badge svg { width: 25px; height: 25px; flex: none; }
.store-badge .lines { display: flex; flex-direction: column; line-height: 1.2; text-align: left; }
.store-badge .top { font-size: 11px; font-weight: 500; opacity: 0.7; }
.store-badge .bottom { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }

/* 기기 프레임 — Apple 마케팅 프레임(1350×2760) 합성. 스크린 홀 비율은 Dayset과 동일 */
/* .wrap을 겸하므로 여기도 롱핸드 (위 주석 참조) */
.hero-shot {
  --dur: 10s;   /* 슬라이드 4장 × 2.5초 — 캡션도 같은 주기를 쓴다 */
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding-top: var(--gap-head);
}
.hero-shot::before {
  content: ""; position: absolute; inset: auto 8% 6% 8%; height: 52%;
  background: radial-gradient(50% 62% at 50% 50%, rgba(94, 139, 255, 0.16), transparent 70%);
  pointer-events: none;
}
.device {
  position: relative; width: min(360px, 80vw); z-index: 2;
  filter: drop-shadow(0 50px 90px rgba(0, 0, 0, 0.8));
}
.device .device-frame {
  position: relative; display: block; width: 100%; height: auto; z-index: 2; pointer-events: none;
}
.device .device-screen {
  position: absolute; z-index: 1; overflow: hidden; background: #000;
  container-type: inline-size;
  left: 5.333%; top: 2.5%; width: 89.334%; height: 95%;
  border-radius: 9% / 4.2%;
}
/* 스크린 홀 안에 꽉 채운다. 이 규칙이 없으면 이미지가 원본 크기로 렌더돼 프레임 밖으로 넘친다 */
.device .device-screen > img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}

/* 스포트라이트 — 기능마다 화면의 **어디를 보라는 건지** 지목한다.
   확대해서 그 부분만 보여주려 했더니 가로가 잘려 기기처럼 안 보였다(실측).
   화면은 온전히 두고 밖을 어둡게 눌러 시선만 옮긴다. `--t`(시작)·`--h`(높이)로 위치 지정.

   ⚠️ `--t`·`--h`는 **스크린샷 원본(414×900)의 세로 %와 1:1로 같다.**
   스크린 홀의 세로비(2.184)와 샷의 세로비(2.174)가 거의 같아 cover가 높이에 맞춰
   꽉 차기 때문이다. 그래서 샷을 다시 뽑으면 `문항 y픽셀 ÷ 900 × 100`으로 바로 계산하면 된다.
   테두리가 **글줄 한가운데를 지나가면 안 된다** — 앱이 잘린 것처럼 보인다.
   반드시 카드·패널 경계(빈 줄)에 맞춘다. 값의 근거는 shots/ 각 이미지 기준:
     solve     51.5→89.0  세그먼트 + 풀이 패널
     concept   51.5→82.5  세그먼트 + 핵심 개념 패널(패널 바닥 81.5)
     similar   51.5→88.5  세그먼트 + 유사문제 2건(두 번째 행 바닥 87.5)
     worksheet 23.0→78.0  문항 1·2 (문항 3 구분선 80 바깥)
     exam      16.5→61.5  유사문제 태그 + 문제 + 보기 4개(④ 바닥 60.5)
     pdf       37.0→84.5  여백 옵션 + 담을 것(A4 요약줄 86 바깥) */
.spot {
  position: absolute; z-index: 2; pointer-events: none;
  left: 3.5%; right: 3.5%; top: var(--t); height: var(--h);
  border: 1.5px solid rgba(94, 139, 255, 0.85);
  border-radius: 14px;
  box-shadow:
    0 0 0 2000px rgba(3, 4, 8, 0.62),
    0 0 26px rgba(94, 139, 255, 0.45),
    inset 0 0 22px rgba(94, 139, 255, 0.14);
}

/* 유리 반사 — 프레임만 씌우면 스티커처럼 납작하다 */
.device .device-screen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.07) 0%,
    rgba(255, 255, 255, 0.015) 20%, transparent 32%);
}
/* 히어로 슬라이드쇼 — 촬영 → 문제 → 풀이 → 유사문제.
   화면 녹화도 해봤지만 조작 흐름을 따라가느라 정작 각 화면이 뭘 하는 건지 안 남았다.
   네 장을 또렷하게 넘기고 **토스트로 한 줄씩 붙이는 쪽**이 짧은 시간에 더 많이 전달한다.
   한 장 2.5초 × 4 = 10초 루프. */

.hshow .hslide {
  position: absolute; inset: 0; margin: 0; opacity: 0;
  animation: heroSwap var(--dur, 10s) infinite;
  animation-delay: calc(var(--i) * var(--dur, 10s) / 4);
}
.hshow .hslide img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 화면 설명 — **기기 위**에 둔다.
   처음엔 폰 화면 안쪽 아래에 토스트로 넣었는데, 모바일에선 기기 하단이 접혀서
   대부분 안 보였다(실측). 위로 빼면 히어로 첫 화면에서 늘 읽힌다. */
/* 기기 **위쪽** 테두리에 반쯤 걸친다 — 완전히 떨어뜨려 놓으면 "이 문구가 저 화면 얘기"라는
   연결이 약하다. 알약 절반이 기기를 덮으면 둘이 한 덩어리로 읽힌다 */
.hcaps {
  position: relative; z-index: 3; height: 2.9em; width: 100%;
  display: flex; justify-content: center;
  margin-bottom: -1.45em;
}
.hcap {
  position: absolute; top: 0; opacity: 0; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  /* 기기에 겹치므로 **불투명**이어야 한다 — 반투명이면 뒤 화면이 비쳐 글자가 지저분해진다.
     색은 원래 쓰던 반투명 파랑을 페이지 배경 위에 미리 얹은 값 */
  background: #121a2c;
  border: 1px solid rgba(94, 139, 255, 0.42);
  border-radius: 999px; padding: 10px 20px;
  color: #cfdcff; font-size: clamp(14px, 1.9vw, 16px); font-weight: 700;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 26px -10px rgba(94, 139, 255, 0.6);
  animation: heroToast var(--dur, 10s) infinite;
  animation-delay: calc(var(--i) * var(--dur, 10s) / 4);
}
/* 앞의 점 — 지금 이 화면을 가리킨다는 신호 */
.hcap::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: #5E8BFF; box-shadow: 0 0 10px rgba(94, 139, 255, 0.9);
}
@keyframes heroSwap {
  0%   { opacity: 0; transform: scale(1.035); }
  3%   { opacity: 1; transform: scale(1); }
  22%  { opacity: 1; transform: scale(1); }
  25%  { opacity: 0; transform: scale(0.99); }
  100% { opacity: 0; }
}
@keyframes heroToast {
  0%   { opacity: 0; transform: translateY(14px); }
  7%   { opacity: 1; transform: translateY(0); }
  20%  { opacity: 1; transform: translateY(0); }
  24%  { opacity: 0; transform: translateY(-8px); }
  100% { opacity: 0; }
}
/* 움직임을 줄이도록 설정한 사람에겐 첫 장만 */
@media (prefers-reduced-motion: reduce) {
  .hshow .hslide, .hcap { animation: none; }
  .hshow .hslide[style*="--i:0"], .hcap[style*="--i:0"] { opacity: 1; transform: none; }
}

/* ── 섹션 공통 ── */
.landing-body section { padding-top: var(--gap-section); }
/* 네비가 떠 있으므로 앵커로 점프하면 제목이 그 뒤로 숨는다 — 그만큼 미리 멈춘다 */
.landing-body section[id] { scroll-margin-top: 96px; }
.kicker {
  font-weight: 700; font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.landing-body h2 {
  margin: 14px 0 0; color: var(--ink);
  font-size: clamp(26px, 4.2vw, 40px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.34;
}
.center { text-align: center; }
.section-sub {
  margin-top: 16px; color: var(--ink-2);
  font-size: clamp(15px, 1.9vw, 16.5px); line-height: 1.75;
}

/* ── 주요 기능 — 설명과 화면을 한 카드에 ──
   따로 놓으면 "이 글이 저 화면 얘기인가?"가 남는다. 테두리 하나로 묶어야 한 덩어리로 읽힌다.
   기기는 카드 아래로 흘러나가게 잘라 둔다 — 액자에 넣은 것보다 화면이 커 보이고,
   여섯 장이 이어질 때 세로 길이도 줄어든다. */
.frows { display: grid; gap: clamp(14px, 1.8vw, 20px); margin-top: var(--gap-head); }

.fcard {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 0.82fr;
  gap: clamp(20px, 4vw, 56px); align-items: center;
  padding: clamp(30px, 4vw, 54px) clamp(26px, 4vw, 54px) 0;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: clamp(24px, 2.6vw, 32px);
  background:
    radial-gradient(120% 90% at 78% 0%, rgba(94, 139, 255, 0.13), transparent 62%),
    linear-gradient(163deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018));
  transition: border-color 0.3s, transform 0.3s;
}
.fcard:hover { border-color: rgba(255, 255, 255, 0.17); transform: translateY(-3px); }
/* 짝수 카드는 좌우를 바꾼다 — 여섯 장이 같은 배치면 스크롤이 단조롭다 */
.fcard.flip .ftxt { order: 2; }
.fcard.flip { background:
  radial-gradient(120% 90% at 22% 0%, rgba(94, 139, 255, 0.13), transparent 62%),
  linear-gradient(197deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)); }

.ftxt { padding-bottom: clamp(30px, 4vw, 54px); }
.fnum {
  display: inline-block; margin-bottom: 14px;
  color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: 0.1em;
}
.ftxt b {
  display: block; color: var(--ink);
  font-size: clamp(21px, 2.9vw, 29px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.35;
}
.ftxt p {
  margin-top: 13px; max-width: 25em;
  color: rgba(255, 255, 255, 0.68);
  font-size: clamp(15px, 1.8vw, 16.5px); line-height: 1.78;
}

/* 기기는 카드 바닥을 넘어 잘린다 (카드의 overflow:hidden이 잘라준다) */
.fvis { display: flex; justify-content: center; align-self: end; margin-bottom: -9%; }
.fcard .device {
  width: clamp(190px, 24vw, 260px);
  filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.7));
}

/* ── 그 밖의 기능 ──
   주요 기능 여섯은 화면까지 붙여 크게 보여주고, 나머지는 글로만 훑게 한다.
   전부 같은 무게로 늘어놓으면 무엇이 핵심인지 사라진다. */
.mgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: var(--gap-head);
}
.mitem {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px; padding: 22px 22px 24px;
  background: rgba(255, 255, 255, 0.028);
  transition: border-color 0.3s;
}
.mitem:hover { border-color: rgba(255, 255, 255, 0.16); }
.mitem b { display: block; color: var(--ink); font-size: 16px; letter-spacing: -0.02em; }
.mitem span {
  display: block; margin-top: 8px;
  color: var(--ink-2); font-size: 14px; line-height: 1.68;
}

/* ── 요금제 ── */
.plans {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 14px; margin-top: var(--gap-head); align-items: stretch;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 24px; padding: 30px 26px 32px;
  background: rgba(255, 255, 255, 0.03);
}
/* Pro는 테두리와 후광으로만 구분한다 — 색을 더 칠하면 무료가 벌처럼 보인다 */
.plan.pro {
  border-color: rgba(94, 139, 255, 0.42);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(94, 139, 255, 0.14), transparent 62%),
    rgba(255, 255, 255, 0.035);
  box-shadow: 0 0 60px -22px rgba(94, 139, 255, 0.55);
}
.pbadge {
  position: absolute; top: -11px; left: 26px;
  background: linear-gradient(104deg, #3D63F2, #7C6AF9); color: #fff;
  font-size: 11.5px; font-weight: 800; letter-spacing: -0.01em;
  padding: 5px 12px; border-radius: 999px;
}
.ptag {
  display: inline-block; color: var(--ink-2);
  font-size: 14px; font-weight: 700; letter-spacing: 0.02em;
}
.pprice {
  margin-top: 12px; color: var(--ink);
  font-size: clamp(28px, 3.6vw, 38px); font-weight: 800; letter-spacing: -0.03em;
}
.pprice small { font-size: 14px; font-weight: 600; color: var(--ink-2); margin-left: 4px; }
.pnote { margin-top: 6px; color: var(--ink-3); font-size: 13.5px; }
.plan ul { list-style: none; margin: 24px 0 0; padding: 0; }
.plan li {
  position: relative; padding-left: 25px; margin-bottom: 11px;
  color: rgba(255, 255, 255, 0.72); font-size: 15px; line-height: 1.6;
}
/* 체크 표시는 브랜드 마크와 같은 모양(획만 단색) */
.plan li::before {
  content: ""; position: absolute; left: 3px; top: 0.42em;
  width: 11px; height: 6px; border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent); transform: rotate(-45deg);
}
.plan.pro li { color: rgba(255, 255, 255, 0.85); }
.pfoot {
  margin-top: 20px; text-align: center;
  color: var(--ink-3); font-size: 13px; line-height: 1.7;
}

/* ── 아웃트로 ── */
.landing-body section.outro {
  position: relative; text-align: center; overflow: hidden;
  padding-bottom: clamp(64px, 9vw, 96px);
}
.outro::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(46% 56% at 50% 58%, rgba(94, 139, 255, 0.13), transparent 70%);
}
.outro img.icon {
  width: 78px; height: 78px; border-radius: 21px; margin-bottom: 26px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 20px 50px rgba(0, 0, 0, 0.7),
    0 0 70px -20px rgba(94, 139, 255, 0.6);
}
.outro h2 { font-size: clamp(26px, 4.6vw, 42px); }
.outro .cta-row { margin-top: 28px; }
.outro .contact { position: relative; margin-top: 26px; font-size: 16px; color: var(--ink-2); }
.outro .contact a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.outro .contact a:hover { border-color: rgba(255, 255, 255, 0.5); }

/* ── 푸터 ── */
.landing-body footer {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 38px; padding-bottom: 56px; text-align: center;
  color: var(--ink-3); font-size: 13px; line-height: 2.05;
  margin-top: 0;
}
.landing-body footer a { color: var(--ink-2); text-decoration: none; }
.landing-body footer a:hover { color: var(--ink); }
.landing-body footer .links {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin-bottom: 18px;
  font-size: 13.5px; font-weight: 600;
}
.landing-body footer .biz { font-size: 12.5px; color: var(--ink-3); margin-bottom: 14px; }
.landing-body footer .biz .sep { opacity: 0.4; margin: 0 7px; }
/* 좁은 화면에서 사업자등록번호가 줄 가운데서 끊기던 걸 막는다 — 항목 단위로만 줄바꿈 */
.landing-body footer .biz .nb { white-space: nowrap; }

@media (max-width: 760px) {
  /* 좁은 화면에선 설명 먼저, 화면 다음. 카드 안이라 순서가 바뀌어도 묶임이 유지된다 */
  .fcard { grid-template-columns: 1fr; gap: 4px; padding-left: 24px; padding-right: 24px; }
  .fcard.flip .ftxt { order: 0; }
  .ftxt { padding-bottom: 0; }
  .fcard .device { width: min(250px, 62vw); }
  .fvis { margin-top: 26px; margin-bottom: -11%; }
  .mgrid { grid-template-columns: 1fr; gap: 10px; }
  .mitem { padding: 18px 18px 20px; border-radius: 16px; }
  .plans { grid-template-columns: 1fr; }
  .plan { padding: 28px 24px 30px; }
  .navbar { top: 10px; padding: 0 10px; }
  .pillbar { padding: 8px 8px 8px 12px; gap: 4px; }
  .wordmark span { font-size: 15px; }
  .wordmark img { width: 24px; height: 24px; }
  .pillbar a.link { font-size: 13px; padding: 8px 9px; }
  .pillbar a.link.hide-m { display: none; }
  .pillbar .soon { font-size: 12px; padding: 8px 12px; }
}