/* Greek Speaking Club v2 - "Athens poster" design
   Bold colour blocks, ink outlines, hard shadows, oversized type. */

:root{
  --ink:#14161d;
  --paper:#fff6e8;
  --paper-2:#ffeccc;
  --cobalt:#2448e6;
  --cobalt-d:#1a35b0;
  --sun:#ffc93a;
  --tomato:#ff5a36;
  --pink:#ff8cc6;
  --mint:#22c08c;
  --sky:#c7dbff;
  --white:#fff;
  --line:3px solid var(--ink);
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --r:22px;
  --r-lg:34px;
  --wrap:1180px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --display:"Commissioner", "Helvetica Neue", Arial, sans-serif;
  --body:"Commissioner", "Helvetica Neue", Arial, sans-serif;
  --serif:"Literata", Georgia, serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:18px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit}
button{font:inherit; color:inherit}
.wrap{width:min(var(--wrap), calc(100% - 40px)); margin-inline:auto}
.gr{font-family:var(--serif); font-style:italic; font-weight:500}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:16px 26px; border:var(--line); border-radius:999px;
  font-weight:800; font-size:18px; text-decoration:none; cursor:pointer;
  background:var(--white); box-shadow:var(--shadow-sm);
  transition:transform .15s var(--ease), box-shadow .15s var(--ease);
}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink)}
.btn.hot{background:var(--tomato); color:var(--ink)}
.btn.blue{background:var(--cobalt); color:var(--white)}
.btn.sun{background:var(--sun); color:var(--ink)}
.btn .arrow{transition:transform .2s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn.big{padding:20px 34px; font-size:21px}

/* ---------- ticker ---------- */
.ticker{
  background:var(--ink); color:var(--paper); overflow:hidden; white-space:nowrap;
  border-bottom:var(--line); font-weight:700; font-size:15px; letter-spacing:.02em;
}
.ticker .track{display:inline-flex; gap:42px; padding:10px 0; animation:marquee 38s linear infinite}
.ticker span b{color:var(--sun); font-family:var(--serif); font-style:italic; font-weight:500; font-size:17px; margin-right:8px}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:var(--paper); border-bottom:var(--line)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:76px}
.logo{display:flex; align-items:center; gap:12px; font-weight:900; font-size:20px; text-decoration:none; letter-spacing:-.01em}
.logo .mark{
  width:44px; height:40px; border:var(--line); border-radius:14px 14px 14px 4px;
  background:var(--cobalt); color:var(--white); display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-size:24px; box-shadow:3px 3px 0 var(--ink);
}
.nav ul{display:flex; gap:6px; list-style:none; margin:0; padding:0}
.nav ul a{display:block; padding:9px 14px; border-radius:999px; text-decoration:none; font-weight:700; font-size:16px}
.nav ul a:hover{background:var(--sun)}
.nav .btn{padding:11px 20px; font-size:16px}
.burger{display:none; background:none; border:var(--line); border-radius:12px; width:46px; height:46px; cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative; padding:64px 0 90px; overflow:hidden}
.hero .wrap{display:grid; grid-template-columns:1.2fr .8fr; gap:48px; align-items:center}
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
  border:2.5px solid var(--ink); border-radius:999px; background:var(--white);
  font-weight:700; font-size:14px; letter-spacing:.02em;
}
.chip .dot{width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(34,192,140,.25)}
h1.mega{
  font-family:var(--display); font-weight:900; letter-spacing:-.045em; line-height:.92;
  font-size:clamp(44px, 6.2vw, 96px); margin:22px 0 18px;
}
h1.mega .l1, h1.mega .l2{display:block; white-space:nowrap}
.say{
  font-family:var(--serif); font-style:italic; font-weight:600; letter-spacing:-.02em;
  background:var(--sun); border:var(--line); border-radius:22px; padding:0 .16em .06em;
  box-shadow:var(--shadow); cursor:pointer; display:inline-block; transform:rotate(-2deg);
  transition:transform .2s var(--ease), background .2s;
  color:var(--ink); font-size:1em; line-height:1.05;
}
.say:hover{transform:rotate(0) scale(1.03); background:var(--pink)}
.say.playing{background:var(--mint)}
.gloss{font-size:16px; font-weight:600; margin:0 0 22px; display:flex; align-items:flex-start; gap:10px}
.gloss svg{flex:none; margin-top:3px}
.gloss .key{font-family:var(--serif); font-style:italic; font-size:18px}
.lead{font-size:clamp(19px, 1.7vw, 22px); max-width:34em; margin:0 0 30px}
.lead strong{background:linear-gradient(transparent 60%, var(--sky) 60%)}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.ticks{display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:26px 0 0; font-weight:700; font-size:16px}
.ticks li{display:flex; align-items:center; gap:8px}
.ticks li::before{content:""; width:20px; height:20px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2314161d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; border:2px solid var(--ink)}

.hero-art{position:relative; aspect-ratio:4/5; max-width:470px; justify-self:center; width:100%}
.hero-art .blob{
  position:absolute; inset:6% 0 0 8%; background:var(--cobalt); border:var(--line);
  border-radius:240px 240px var(--r-lg) var(--r-lg); box-shadow:var(--shadow);
}
.hero-art .photo{
  position:absolute; inset:0 8% 6% 0; border:var(--line); overflow:hidden;
  border-radius:240px 240px var(--r-lg) var(--r-lg); background:var(--pink);
}
.hero-art .photo img{width:100%; height:100%; object-fit:cover; object-position:50% 30%}
.sticker{position:absolute; border:var(--line); box-shadow:var(--shadow-sm); z-index:2}
.bubble{
  left:-16%; top:3%; background:var(--white); border-radius:24px 24px 24px 6px;
  padding:14px 18px 14px 14px; display:flex; gap:12px; align-items:center; cursor:pointer;
  animation:bob 5s ease-in-out infinite; text-align:left;
}
.bubble .play{width:42px; height:42px; border-radius:50%; background:var(--tomato); border:2.5px solid var(--ink); display:grid; place-items:center; flex:none}
.bubble .play svg{width:16px; height:16px; margin-left:3px}
.bubble.playing .play{background:var(--mint)}
.bubble .t1{font-family:var(--serif); font-style:italic; font-weight:600; font-size:21px; line-height:1.15; display:block}
.bubble .t2{font-size:13px; font-weight:700; opacity:.75; display:block}
.price-badge{
  right:-4%; bottom:16%; width:132px; height:132px; border-radius:50%; background:var(--sun);
  display:grid; place-items:center; text-align:center; transform:rotate(10deg); line-height:1;
  animation:spin-wobble 7s ease-in-out infinite;
}
.price-badge small{display:block; font-weight:800; font-size:14px; letter-spacing:.06em; text-transform:uppercase}
.price-badge strong{display:block; font-size:44px; font-weight:900; letter-spacing:-.04em; margin-top:4px}
.since{left:4%; bottom:-2%; background:var(--mint); border-radius:999px; padding:10px 18px; font-weight:800; font-size:15px; transform:rotate(-4deg)}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)} 50%{transform:translateY(-10px) rotate(-1deg)}}
@keyframes spin-wobble{0%,100%{transform:rotate(10deg)} 50%{transform:rotate(-4deg)}}

.hero .squig{position:absolute; z-index:-1; opacity:.9}

/* ---------- section scaffolding ---------- */
section{position:relative}
.sec{padding:110px 0}
.eyebrow{
  display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:14px;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px;
}
.eyebrow .gl{font-family:var(--serif); font-style:italic; font-size:22px; letter-spacing:0; text-transform:none}
h2.big{font-family:var(--display); font-weight:900; letter-spacing:-.04em; line-height:.98; font-size:clamp(40px, 5.6vw, 76px); margin:0 0 18px}
h2.big .gr{font-weight:600; letter-spacing:-.02em}
.intro{font-size:20px; max-width:36em; margin:0}
.center{text-align:center}
.center .intro{margin-inline:auto}

/* ---------- what you get ---------- */
.get{background:var(--cobalt); color:var(--white); border-block:var(--line)}
.get h2 .hl{color:var(--sun)}
.cards4{display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:52px}
.card{
  border:var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:28px 24px 26px;
  color:var(--ink); background:var(--white); transition:transform .2s var(--ease);
}
.card:hover{transform:translateY(-6px) rotate(-.6deg)}
.card .ic{width:60px; height:60px; border-radius:18px; border:var(--line); display:grid; place-items:center; margin-bottom:18px; background:var(--white)}
.card .ic svg{width:30px; height:30px}
.card h3{font-size:23px; line-height:1.15; margin:0 0 10px; font-weight:900; letter-spacing:-.02em}
.card p{margin:0; font-size:16.5px}
.c-sun{background:var(--sun)} .c-pink{background:var(--pink)} .c-mint{background:var(--mint)} .c-sky{background:var(--sky)} .c-tomato{background:var(--tomato)}

/* ---------- try it ---------- */
.try .wrap{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px; align-items:start}
.board{border:var(--line); border-radius:var(--r-lg); background:var(--white); box-shadow:var(--shadow); padding:22px}
.tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.tab{border:2.5px solid var(--ink); border-radius:999px; padding:9px 16px; font-weight:800; font-size:15px; background:var(--paper); cursor:pointer}
.tab[aria-selected="true"]{background:var(--ink); color:var(--paper)}
.phrases{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
.ph{
  text-align:left; border:2.5px solid var(--ink); border-radius:18px; padding:16px 16px 14px;
  cursor:pointer; position:relative; transition:transform .15s var(--ease), box-shadow .15s;
  box-shadow:3px 3px 0 var(--ink); animation:pop .4s var(--ease) both;
}
.ph:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink)}
.ph .g{font-family:var(--serif); font-style:italic; font-weight:600; font-size:24px; line-height:1.15; display:block; padding-right:36px}
.ph .t{display:block; font-size:14px; font-weight:700; opacity:.7; margin-top:6px}
.ph .e{display:block; font-size:16px; font-weight:600; margin-top:2px}
.ph .spk{position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:2px solid var(--ink); background:var(--white); display:grid; place-items:center}
.ph .spk svg{width:16px; height:16px}
.ph.playing .spk{background:var(--ink); color:var(--white); animation:pulse .8s ease-in-out infinite}
.ph:nth-child(4n+1){background:var(--sun)} .ph:nth-child(4n+2){background:var(--sky)}
.ph:nth-child(4n+3){background:var(--pink)} .ph:nth-child(4n+4){background:var(--mint)}
@keyframes pop{from{opacity:0; transform:translateY(10px) scale(.97)} to{opacity:1; transform:none}}
@keyframes pulse{50%{transform:scale(1.12)}}
.slow{display:flex; align-items:center; gap:12px; margin-top:18px; font-weight:700; font-size:16px; cursor:pointer; user-select:none}
.switch{width:54px; height:30px; border-radius:999px; border:2.5px solid var(--ink); background:var(--paper); position:relative; transition:background .2s}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:var(--ink); transition:transform .2s var(--ease)}
.slow input{position:absolute; opacity:0}
.slow input:checked + .switch{background:var(--mint)}
.slow input:checked + .switch::after{transform:translateX(24px)}
.try .note{margin-top:22px; font-size:16px}
.try .note a{font-weight:800}

/* ---------- prices ---------- */
.prices{background:var(--sun); border-block:var(--line)}
.seg{
  display:inline-flex; flex-wrap:wrap; justify-content:center; border:var(--line); border-radius:999px;
  background:var(--white); padding:5px; gap:4px; box-shadow:var(--shadow-sm); margin:34px 0 10px;
}
.seg button{border:0; background:none; padding:11px 18px; border-radius:999px; font-weight:800; font-size:16px; cursor:pointer; display:flex; gap:8px; align-items:center}
.seg button .off{font-size:12px; background:var(--mint); border:2px solid var(--ink); border-radius:999px; padding:1px 7px}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
.seg button[aria-pressed="true"] .off{color:var(--ink)}
.seg-hint{font-weight:700; font-size:15px; min-height:24px}
.plans{display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:28px; text-align:left}
.plan{border:var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:34px 32px; background:var(--white); position:relative}
.plan.alt{background:var(--cobalt); color:var(--white)}
.plan .tag{position:absolute; top:-18px; right:26px; background:var(--pink); border:var(--line); border-radius:999px; padding:6px 14px; font-weight:800; font-size:14px; color:var(--ink); transform:rotate(3deg)}
.plan h3{margin:0; font-size:28px; font-weight:900; letter-spacing:-.02em}
.plan .len{display:inline-block; margin-top:8px; font-weight:800; font-size:15px; border:2.5px solid currentColor; border-radius:999px; padding:3px 12px}
.plan .amt{display:flex; align-items:flex-end; gap:12px; margin:22px 0 4px}
.plan .amt b{font-size:clamp(64px, 7vw, 92px); line-height:.85; font-weight:900; letter-spacing:-.05em}
.plan .amt span{font-weight:700; font-size:16px; padding-bottom:6px; opacity:.85}
.plan .tot{font-weight:700; font-size:16px; min-height:26px; opacity:.85}
.plan ul{list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:9px; font-size:17px}
.plan li{display:flex; gap:10px; align-items:flex-start}
.plan li::before{content:"✓"; font-weight:900; color:var(--mint); flex:none; -webkit-text-stroke:.6px var(--ink)}
.plan.alt li::before{color:var(--sun); -webkit-text-stroke:0}
.price-note{margin:30px auto 0; max-width:44em; font-size:16px; font-weight:600}

/* ---------- how ---------- */
.steps{display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; margin-top:56px; counter-reset:s}
.step{border:var(--line); border-radius:var(--r-lg); padding:30px 28px 30px; background:var(--white); box-shadow:var(--shadow); position:relative}
.step .letter{
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:76px; line-height:.8;
  width:96px; height:96px; border-radius:28px; border:var(--line); display:grid; place-items:center; margin-bottom:22px;
}
.step:nth-child(1) .letter{background:var(--tomato)} .step:nth-child(2) .letter{background:var(--sky)} .step:nth-child(3) .letter{background:var(--mint)}
.step h3{font-size:25px; font-weight:900; letter-spacing:-.02em; margin:0 0 10px}
.step p{margin:0; font-size:17px}
.mini-cal{margin-top:20px; border:2.5px solid var(--ink); border-radius:16px; padding:12px; background:var(--paper)}
.mini-cal .row{display:flex; gap:8px; flex-wrap:wrap}
.mini-cal .slot{border:2px solid var(--ink); border-radius:10px; padding:5px 10px; font-weight:800; font-size:14px; background:var(--white)}
.mini-cal .slot.on{background:var(--cobalt); color:var(--white)}
.mini-cal small{display:block; font-weight:700; font-size:12.5px; margin-top:8px; opacity:.7}
.arrowline{position:absolute; top:62px; right:-30px; width:36px; z-index:2}

/* ---------- who ---------- */
.who{background:var(--ink); color:var(--paper); border-block:var(--line)}
.who h2 .hl{color:var(--pink)}
.tiles{display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; margin-top:52px}
.tile{
  grid-column:span 2; border:var(--line); border-color:var(--paper); border-radius:var(--r);
  padding:26px 24px; color:var(--ink); position:relative; overflow:hidden; transition:transform .2s var(--ease);
}
.tile:hover{transform:translateY(-5px)}

.tile .big-gr{font-family:var(--serif); font-style:italic; font-weight:600; font-size:34px; line-height:1; display:block; margin-bottom:12px}
.tile h3{font-size:21px; font-weight:900; margin:0 0 8px; letter-spacing:-.01em}
.tile p{margin:0; font-size:16.5px}

/* ---------- meet ---------- */
.meet .wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center}
.portrait{position:relative; max-width:440px}
.portrait .frame{border:var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:12px 12px 0 var(--tomato), 12px 12px 0 3px var(--ink); aspect-ratio:1; background:var(--sky)}
.portrait .frame img{width:100%; height:100%; object-fit:cover}
.portrait .name{position:absolute; left:-18px; bottom:28px; background:var(--sun); border:var(--line); border-radius:16px; padding:10px 16px; font-weight:900; font-size:20px; box-shadow:var(--shadow-sm); transform:rotate(-3deg)}
.portrait .name small{display:block; font-weight:700; font-size:13px}
.creds{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0}
.creds span{border:2.5px solid var(--ink); border-radius:999px; padding:7px 14px; font-weight:700; font-size:15px; background:var(--white)}
.creds span:nth-child(1){background:var(--sky)} .creds span:nth-child(2){background:var(--pink)} .creds span:nth-child(3){background:var(--mint)}
blockquote{margin:44px 0 28px; padding:22px 26px; border:var(--line); border-radius:var(--r); background:var(--paper-2); font-family:var(--serif); font-style:italic; font-size:22px; line-height:1.4; position:relative}
blockquote::before{content:"“"; position:absolute; top:-34px; left:18px; font-size:90px; line-height:1; color:var(--tomato); font-style:normal}
.meet p{font-size:18px}

/* ---------- already know ---------- */
.know{background:var(--pink); border-block:var(--line); overflow:hidden}
.flips{display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; margin-top:44px}
.flip{perspective:900px; height:150px; cursor:pointer; border:0; background:none; padding:0}
.flip .in{display:block; position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .55s var(--ease)}
.flip.on .in{transform:rotateY(180deg)}
.flip .f, .flip .b{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border:var(--line); border-radius:20px; display:grid; place-items:center; padding:10px; box-shadow:var(--shadow-sm);
}
.flip .f{background:var(--white); font-family:var(--serif); font-style:italic; font-weight:600; font-size:24px}
.flip .b{background:var(--ink); color:var(--sun); transform:rotateY(180deg); font-weight:900; font-size:22px}
.know .hint{font-weight:700; margin-top:18px}

/* ---------- phrasebook ---------- */
.pb{background:var(--mint); border-block:var(--line)}
.pb .wrap{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center}
.stack{position:relative; height:420px}
.pcard{
  position:absolute; width:300px; border:var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:22px 22px 20px; background:var(--white);
}
.pcard .n{font-weight:900; font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.6}
.pcard .g{font-family:var(--serif); font-style:italic; font-weight:600; font-size:30px; line-height:1.1; margin:10px 0 6px; display:block}
.pcard .e{font-weight:700; font-size:16px}
.pcard:nth-child(1){left:2%; top:40px; transform:rotate(-8deg); background:var(--sun)}
.pcard:nth-child(2){left:22%; top:120px; transform:rotate(4deg); background:var(--sky)}
.pcard:nth-child(3){left:10%; top:236px; transform:rotate(-3deg); background:var(--white)}
.pcard .count{position:absolute; right:-18px; top:-22px; width:76px; height:76px; border-radius:50%; background:var(--tomato); border:var(--line); display:grid; place-items:center; font-weight:900; font-size:26px; transform:rotate(12deg)}
.pb-list{list-style:none; padding:0; margin:22px 0 28px; display:grid; gap:10px; font-weight:700}
.pb-list li{display:flex; gap:12px; align-items:center}
.pb-list li span{width:30px; height:30px; border-radius:10px; border:2.5px solid var(--ink); background:var(--white); display:grid; place-items:center; font-family:var(--serif); font-style:italic; flex:none}
.pb-form{display:flex; gap:10px; flex-wrap:wrap}
.pb-form input{
  flex:1 1 240px; min-width:0; border:var(--line); border-radius:999px; padding:16px 22px; font:inherit; font-size:18px;
  background:var(--white); box-shadow:var(--shadow-sm); outline:none;
}
.pb-form input:focus{box-shadow:var(--shadow-sm), 0 0 0 4px var(--sun)}
.pb .fine{font-size:14px; font-weight:600; margin-top:14px}
.pb .ok{display:none; font-weight:800; font-size:20px; background:var(--white); border:var(--line); border-radius:var(--r); padding:18px 20px}

/* ---------- faq ---------- */
.faq .wrap{max-width:900px}
.qa{border:var(--line); border-radius:var(--r); background:var(--white); margin-top:14px; box-shadow:var(--shadow-sm); overflow:hidden}
.qa summary{list-style:none; cursor:pointer; padding:22px 66px 22px 24px; font-weight:800; font-size:19px; position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"+"; position:absolute; right:18px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:50%;
  border:2.5px solid var(--ink); display:grid; place-items:center; font-size:22px; line-height:1; background:var(--sun); transition:transform .25s var(--ease)
}
.qa[open] summary::after{transform:translateY(-50%) rotate(45deg); background:var(--pink)}
.qa .a{padding:0 24px 22px; font-size:17px}
.qa .a p{margin:0}

/* ---------- final ---------- */
.final{background:var(--tomato); border-top:var(--line); padding:120px 0; overflow:hidden}
.final h2{font-size:clamp(64px, 12vw, 170px); line-height:.86; margin:0 0 10px}
.final h2 .gr{display:inline-block; background:var(--white); border:var(--line); border-radius:30px; padding:0 .14em .05em; box-shadow:var(--shadow); transform:rotate(-2deg)}
.final .sub{font-size:22px; font-weight:700; margin:22px 0 34px}
.final .cta-row{justify-content:center}

/* ---------- footer ---------- */
footer{background:var(--ink); color:var(--paper); padding:64px 0 110px; font-size:16px}
footer .wrap{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px}
footer h4{margin:0 0 12px; font-size:14px; letter-spacing:.12em; text-transform:uppercase; color:var(--sun)}
footer ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
footer a{text-decoration:none; opacity:.85} footer a:hover{opacity:1; text-decoration:underline}
footer .logo{color:var(--paper); margin-bottom:12px}
footer .copy{grid-column:1/-1; border-top:1px solid rgba(255,246,232,.2); padding-top:20px; margin-top:10px; opacity:.7; font-size:14px}

/* ---------- sticky mobile CTA ---------- */
.mbar{display:none}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1060px){
  .cards4{grid-template-columns:repeat(2, 1fr)}
  .flips{grid-template-columns:repeat(3, 1fr)}
}
@media (max-width:900px){
  body{font-size:17px}
  .nav ul, .nav .btn{display:none}
  .burger{display:grid; place-items:center}
  .nav.open ul{display:flex; flex-direction:column; position:absolute; top:76px; left:0; right:0; background:var(--paper); border-bottom:var(--line); padding:14px 20px 20px}
  .nav.open ul a{font-size:20px; padding:12px 14px}
  .hero{padding:36px 0 70px}
  .hero .wrap, .try .wrap, .meet .wrap, .pb .wrap{grid-template-columns:1fr; gap:44px}
  .hero-art{max-width:360px}
  .bubble{left:-6%}
  .price-badge{width:112px; height:112px; right:-2%}
  .price-badge strong{font-size:36px}
  .sec{padding:80px 0}
  .plans, .steps{grid-template-columns:1fr}
  .arrowline{display:none}
  .tiles{grid-template-columns:1fr}
  .tile{grid-column:auto}
  .stack{height:360px; max-width:420px}
  .pcard{width:250px}
  footer .wrap{grid-template-columns:1fr 1fr}
  .mbar{
    display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:60; gap:10px;
    transform:translateY(140%); transition:transform .35s var(--ease);
  }
  .mbar.show{transform:none}
  .mbar .btn{flex:1; justify-content:center; padding:15px 16px; font-size:17px}
}
@media (max-width:560px){
  .cards4{grid-template-columns:1fr}
  .phrases{grid-template-columns:1fr}
  .flips{grid-template-columns:repeat(2, 1fr)}
  .plan{padding:28px 22px}
  .seg button{padding:9px 12px; font-size:15px}
  footer .wrap{grid-template-columns:1fr}
  .btn.big{padding:18px 26px; font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

.center .eyebrow{justify-content:center; flex-wrap:wrap; row-gap:2px}

/* =====================================================================
   Inner pages
   ===================================================================== */
.nav ul a.on{background:var(--ink); color:var(--paper)}

/* page hero */
.phero{position:relative; overflow:hidden; border-bottom:var(--line); padding:80px 0 90px}
.phero.c-sun{background:var(--sun)} .phero.c-pink{background:var(--pink)} .phero.c-mint{background:var(--mint)}
.phero.c-sky{background:var(--sky)} .phero.c-cobalt{background:var(--cobalt); color:var(--white)} .phero.c-paper{background:var(--paper-2)}
.phero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.3fr .7fr; gap:40px; align-items:center}
.phero h1{font-family:var(--display); font-weight:900; letter-spacing:-.045em; line-height:.95; font-size:clamp(48px, 7vw, 100px); margin:10px 0 18px}
.phero h1 .gr{font-weight:600; letter-spacing:-.02em}
.phero .lead{margin-bottom:28px}
.phero .bigletter{
  justify-self:center; font-family:var(--serif); font-style:italic; font-weight:600; font-size:clamp(130px, 18vw, 260px); line-height:.8;
  width:1.25em; height:1.25em; display:grid; place-items:center; border:var(--line); border-radius:50%;
  background:var(--white); color:var(--ink); box-shadow:10px 10px 0 var(--ink); transform:rotate(-6deg);
}
.phero .bigletter.round-sq{border-radius:30%}
.phero .stick{position:absolute; border:var(--line); box-shadow:var(--shadow-sm); border-radius:999px; padding:8px 16px; font-weight:800; font-size:15px; background:var(--white); z-index:2; color:var(--ink)}

/* generic grids */
.g2{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.g3{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px}
.g4{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.mt{margin-top:48px}
.box{border:var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:32px 30px; background:var(--white)}
.box h3{font-size:26px; font-weight:900; letter-spacing:-.02em; margin:0 0 10px; line-height:1.1}
.box p{margin:0 0 12px}
.box p:last-child{margin-bottom:0}
.box .k{font-weight:800; font-size:13px; letter-spacing:.14em; text-transform:uppercase; display:inline-block; margin-bottom:12px; border:2.5px solid var(--ink); border-radius:999px; padding:4px 12px; background:var(--white)}
.box.c-sun, .box.c-pink, .box.c-mint, .box.c-sky, .box.c-tomato{color:var(--ink)}
.box.c-cobalt{background:var(--cobalt); color:var(--white)}
.box.c-cobalt .k{color:var(--ink)}
.num{font-family:var(--serif); font-style:italic; font-weight:600; font-size:54px; line-height:.9; display:block; margin-bottom:12px}

/* split sections */
.split{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start}
.split.rev{grid-template-columns:1.1fr .9fr}
.sticky-col{position:sticky; top:110px}
.prose p{font-size:19px; margin:0 0 18px}
.prose p.big1{font-size:23px; font-weight:600; line-height:1.45}
.prose em{font-family:var(--serif); font-weight:600}
.prose strong{background:linear-gradient(transparent 62%, var(--sun) 62%)}

/* chips list (off the clock) */
.offs{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px}
.off{border:var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow-sm); background:var(--white)}
.off b{display:block; font-size:20px; font-weight:900; letter-spacing:-.01em}
.off span{display:block; font-family:var(--serif); font-style:italic; margin-top:6px; font-size:17px}
.off:nth-child(1){background:var(--sun)} .off:nth-child(2){background:var(--sky)} .off:nth-child(3){background:var(--pink)} .off:nth-child(4){background:var(--mint)}

/* price table (how it works) */
.ptable{width:100%; border-collapse:separate; border-spacing:0; border:var(--line); border-radius:var(--r); overflow:hidden; background:var(--white); box-shadow:var(--shadow); margin-top:30px; text-align:left}
.ptable th, .ptable td{padding:16px 18px; border-bottom:2px solid rgba(20,22,29,.12); font-size:17px}
.ptable thead th{background:var(--ink); color:var(--paper); font-weight:800; font-size:14px; letter-spacing:.1em; text-transform:uppercase}
.ptable tr:last-child td{border-bottom:0}
.ptable td b{font-size:20px}
.ptable td small{display:block; font-weight:700; opacity:.65; font-size:14px}
.ptable .save{display:inline-block; background:var(--mint); border:2px solid var(--ink); border-radius:999px; padding:2px 10px; font-weight:800; font-size:14px}

/* forms */
.formcard{border:var(--line); border-radius:var(--r-lg); background:var(--white); box-shadow:10px 10px 0 var(--ink); padding:34px 32px}
.field{margin-bottom:18px}
.field label{display:block; font-weight:800; font-size:15px; margin-bottom:7px}
.field input, .field select, .field textarea{
  width:100%; border:var(--line); border-radius:16px; padding:14px 16px; font:inherit; font-size:17px; background:var(--paper); outline:none;
  transition:box-shadow .15s;
}
.field textarea{min-height:120px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{box-shadow:0 0 0 4px var(--sun)}
.check{display:flex; gap:14px; align-items:flex-start; border:2.5px solid var(--ink); border-radius:18px; padding:14px 16px; margin-bottom:12px; cursor:pointer; background:var(--paper); transition:background .15s}
.check:hover{background:var(--paper-2)}
.check input{appearance:none; -webkit-appearance:none; flex:none; width:26px; height:26px; border:2.5px solid var(--ink); border-radius:8px; background:var(--white); margin:1px 0 0; cursor:pointer; display:grid; place-items:center}
.check input:checked{background:var(--mint)}
.check input:checked::after{content:"✓"; font-weight:900; font-size:17px; line-height:1}
.check b{display:block; font-size:16.5px}
.check span{font-size:15px; line-height:1.45}
.check.need{background:#ffe1d8; border-color:var(--tomato)}
.formnote{font-size:14px; font-weight:600; margin-top:12px; opacity:.8}
.success{display:none; text-align:center; padding:10px 0}
.success .big{font-family:var(--serif); font-style:italic; font-weight:600; font-size:44px; line-height:1.1; margin:0 0 10px}
.success p{margin:0 0 18px}
.perk{display:flex; gap:16px; margin-top:22px}
.perk .ic{flex:none; width:52px; height:52px; border:var(--line); border-radius:16px; display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-weight:600; font-size:26px; background:var(--white)}
.perk b{display:block; font-size:19px}
.perk p{margin:4px 0 0; font-size:16.5px}

/* phrasebook pages */
.pgroup{margin-top:64px}
.pgroup:first-child{margin-top:0}
.pgroup-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px; border-bottom:var(--line); padding-bottom:14px}
.pgroup-head h2{font-size:clamp(30px, 3.6vw, 44px); font-weight:900; letter-spacing:-.03em; margin:0; line-height:1}
.pgroup-head h2 .n{font-family:var(--serif); font-style:italic; font-weight:600; margin-right:12px}
.pgroup-head p{margin:0; max-width:30em; font-weight:600}
.phrases.wide{grid-template-columns:repeat(3, 1fr)}
.ph .note{display:block; font-size:14.5px; font-weight:600; margin-top:10px; padding-top:10px; border-top:2px dashed rgba(20,22,29,.25); line-height:1.4}
.ph.lock{cursor:default; filter:saturate(.4); opacity:.75}
.ph.lock:hover{transform:none; box-shadow:3px 3px 0 var(--ink)}
.ph.lock .t{filter:blur(4px); user-select:none}
.ph.lock .spk{background:var(--paper)}
.slowbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; border:var(--line); border-radius:999px; padding:10px 12px 10px 22px; background:var(--white); box-shadow:var(--shadow-sm); margin-bottom:44px; font-weight:700}
.slowbar .slow{margin:0}
.gate{border:var(--line); border-radius:var(--r-lg); background:var(--cobalt); color:var(--white); box-shadow:12px 12px 0 var(--ink); padding:44px 40px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.gate h2{color:var(--white)}
.gate .check{background:rgba(255,255,255,.1); border-color:var(--white); color:var(--white)}
.gate .check:hover{background:rgba(255,255,255,.16)}
.gate .check input{border-color:var(--ink)}
.gate .check.need{background:rgba(255,90,54,.35); border-color:var(--sun)}
.gate .check a{color:var(--sun)}
.gate .field label{color:var(--white)}
.gate .formnote{color:var(--white)}
.gate .success .big{color:var(--sun)}
.dlrow{display:flex; gap:14px; flex-wrap:wrap; align-items:center}

/* legal */
.legal{max-width:820px; margin:0 auto}
.legal h2{font-size:30px; font-weight:900; letter-spacing:-.02em; margin:52px 0 14px; line-height:1.1}
.legal h2:first-child{margin-top:0}
.legal p, .legal li{font-size:17.5px}
.legal ul{padding-left:0; list-style:none; margin:0 0 18px}
.legal li{position:relative; padding:7px 0 7px 30px}
.legal li::before{content:""; position:absolute; left:4px; top:15px; width:12px; height:12px; border-radius:50%; background:var(--mint); border:2px solid var(--ink)}
.legal .card-note{border:var(--line); border-radius:var(--r); background:var(--sun); padding:20px 24px; box-shadow:var(--shadow-sm); margin:20px 0}
.legal .updated{border-top:var(--line); padding-top:18px; margin-top:52px; font-weight:700; font-size:15px}
.legal a{font-weight:700}

/* 404 */
.lost{min-height:62vh; display:grid; place-items:center; text-align:center; padding:80px 0}
.lost .code{font-weight:900; font-size:clamp(120px, 22vw, 260px); letter-spacing:-.06em; line-height:.8; color:var(--cobalt); -webkit-text-stroke:3px var(--ink); text-shadow:10px 10px 0 var(--ink)}

/* CTA band (inner pages) */
.band2{background:var(--tomato); border-top:var(--line); padding:100px 0; text-align:center}
.band2 h2{font-size:clamp(46px, 7vw, 96px); font-weight:900; letter-spacing:-.045em; line-height:.95; margin:0 0 14px}
.band2 h2 .gr{display:inline-block; background:var(--white); border:var(--line); border-radius:24px; padding:0 .14em .05em; box-shadow:var(--shadow); transform:rotate(-2deg); font-weight:600}
.band2 p{font-size:21px; font-weight:700; margin:0 0 30px}
.band2 .cta-row{justify-content:center}

@media (max-width:1060px){
  .g4, .offs{grid-template-columns:repeat(2, 1fr)}
  .phrases.wide{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:900px){
  .phero{padding:50px 0 60px}
  .phero .wrap, .split, .split.rev, .g2, .g3, .gate{grid-template-columns:1fr}
  .phero .bigletter{display:none}
  .sticky-col{position:static}
  .gate{padding:34px 24px}
  .formcard{padding:26px 20px}
  .ptable th, .ptable td{padding:12px 10px; font-size:15px}
}
@media (max-width:560px){
  .g4, .offs, .phrases.wide{grid-template-columns:1fr}
  .ptable td b{font-size:17px}
}

.box.c-sun{background:var(--sun)} .box.c-pink{background:var(--pink)} .box.c-mint{background:var(--mint)} .box.c-sky{background:var(--sky)} .box.c-tomato{background:var(--tomato)}