/* esimjapan -- editorial kimono. Big photographs, few words, thin lines.
   sumi ink on kinari paper, ai for links, kin for hairlines, shu once per page. */
:root{
  --sumi:#1C1C1C; --sumi70:#403C36; --sumi45:#6E6A62;
  --kinari:#FBFAF5; --kinari2:#F4F1E8;
  --ai:#165E83; --kin:#C7B37F; --shu:#EB6238;
  --line:1px solid #E4DDCB;
  --fjp:'Shippori Mincho B1','Hiragino Mincho ProN',serif;
  --fla:'Cormorant Garamond',Georgia,serif;
  --fb:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --max:1800px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--kinari);color:var(--sumi);
  font:400 16.5px/1.85 var(--fb);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--ai);text-decoration:none}
p{margin:0 0 14px}
h1,h2,h3{margin:0;font-weight:400}
h1{font-family:var(--fla);font-size:clamp(30px,4.6vw,52px);line-height:1.22;
  letter-spacing:.015em}
h2{font-family:var(--fla);font-size:clamp(24px,3vw,34px);letter-spacing:.05em}
/* Fluid, not a fixed column: the gutter scales with the viewport so a 13"
   laptop and a 27" monitor both look deliberate, with an upper bound so an
   ultrawide does not stretch a table to 2500px. */
.wrap{width:100%;max-width:var(--max);margin:0 auto;
  padding:0 clamp(18px,5vw,110px)}
.eyebrow{font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  color:var(--kin);margin-bottom:18px}
body[data-accent=visit] .eyebrow{color:var(--ai)}
.muted{color:var(--sumi70)} .faint{color:var(--sumi45);font-size:13px}

/* section rhythm: one block, one screen's worth of air */
section{padding:110px 0;border-top:var(--line)}
section.washi{background:var(--kinari2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0 0.30 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23w)'/%3E%3C/svg%3E")}
.fx{opacity:0;transform:translateY(14px);
  transition:opacity .9s ease,transform .9s ease}
.fx.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fx{opacity:1;transform:none;transition:none}}

/* top bar: brand + languages, nothing else */
header{position:absolute;inset:0 0 auto;z-index:9;color:#fff}
header .wrap{display:flex;align-items:baseline;gap:22px;padding-top:26px}
.brand{font-family:var(--fla);font-size:17px;letter-spacing:.42em;color:#fff;line-height:1}
.langs{margin-left:auto;font-size:12px;letter-spacing:.18em;display:flex;gap:8px}
.langs a{color:#fff;padding:6px 12px;border:1px solid rgba(255,255,255,.55);
  border-radius:2px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.langs a:hover{border-color:#fff}
.langs a.on{border-color:var(--kin);background:rgba(28,28,28,.28)}

/* hero: full-bleed photograph; only the tategaki and season sit on it */
.hero{position:relative;height:78svh;min-height:480px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover}
.tategaki{position:absolute;right:clamp(18px,5vw,64px);top:110px;
  writing-mode:vertical-rl;font-family:var(--fjp);color:#fff;
  font-size:clamp(22px,3vw,34px);letter-spacing:.4em;line-height:1;
  padding:18px 10px;border:1px solid rgba(255,255,255,.65);
  text-shadow:0 1px 14px rgba(0,0,0,.35)}
.season{position:absolute;right:clamp(30px,6vw,84px);bottom:34px;
  writing-mode:vertical-rl;font-family:var(--fjp);color:#fff;font-size:13px;
  letter-spacing:.3em;text-shadow:0 1px 10px rgba(0,0,0,.4)}

/* the hook: three lines under the photograph, on paper */
.hook{padding:84px 0 96px;border-top:none}
.hook h1{max-width:17em}
.hook .price{font-family:var(--fla);font-size:clamp(20px,2.6vw,27px);
  letter-spacing:.03em;margin:26px 0 10px}
.hook .truth{max-width:52ch;color:var(--sumi70);margin-bottom:40px}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--fb);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;
  padding:15px 34px;border-radius:2px;transition:.18s;border:1px solid var(--sumi)}
.btn.ghost{background:transparent;color:var(--sumi)}
.btn.ghost:hover{background:var(--sumi);color:var(--kinari)}
.btn.shu{background:var(--shu);border-color:var(--shu);color:#fff}
.btn.shu:hover{filter:brightness(.94)}

/* device check */
.device .dial{font-family:var(--fla);font-size:clamp(34px,5vw,54px);
  letter-spacing:.12em;margin:10px 0 14px}
.device .no{max-width:54ch;color:var(--sumi70);margin-top:22px;
  padding-top:22px;border-top:var(--line)}
.split{display:grid;grid-template-columns:1fr minmax(220px,320px);gap:56px;
  align-items:start}
.split .side img{aspect-ratio:3/4;object-fit:cover;width:100%}
.split .side figcaption{margin-top:8px}
@media(max-width:760px){.split{grid-template-columns:1fr}.split .side{display:none}}

/* pricing: three tiles, hairlines, no shadow */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:var(--line)}
.tile{padding:34px 26px 30px;border-right:var(--line);background:var(--kinari);
  display:flex;flex-direction:column;gap:6px}
.tile:last-child{border-right:none}
.tile .tag{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--kin);
  min-height:18px}
body[data-accent=visit] .tile .tag{color:var(--ai)}
.tile .d{font-family:var(--fla);font-size:34px;line-height:1.1}
.tile .p{font-size:22px;margin:4px 0 2px}
.tile .vs{font-size:12.5px;color:var(--sumi45)}
.tile .btn{margin-top:18px;align-self:flex-start;padding:11px 26px}
.pnote{margin-top:26px}
.pnote p{margin:0 0 4px;font-size:13px;color:var(--sumi70)}
.longer{margin-top:18px;font-size:14.5px}
.longer a{border-bottom:1px solid var(--kin)}
@media(max-width:760px){.tiles{grid-template-columns:1fr}
 .tile{border-right:none;border-bottom:var(--line)}.tile:last-child{border-bottom:none}}

/* momiji lead block */
.foliage .dates{font-family:var(--fla);font-size:clamp(17px,2.2vw,22px);
  letter-spacing:.04em;margin:18px 0 8px}
.foliage .myth{color:var(--sumi70);max-width:46ch}
.lead{display:flex;gap:0;margin-top:30px;max-width:460px}
.lead input{flex:1;font:400 15px/1 var(--fb);padding:15px 16px;background:#fff;
  border:var(--line);border-right:none;border-radius:2px 0 0 2px;color:var(--sumi);
  outline:none;min-width:0}
.lead input:focus{border-color:var(--kin)}
.lead .btn{border-radius:0 2px 2px 0;white-space:nowrap;padding:15px 22px}
.lead-msg{margin-top:10px;font-size:13px;min-height:20px}

/* comparison: three rows, thin rules */
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--sumi45);
  font-weight:400;text-align:left;padding:0 12px 12px 0}
td{padding:16px 12px 16px 0;border-top:var(--line)}
td.us{font-family:var(--fla);font-size:20px;white-space:nowrap}
td.them{color:var(--sumi45)}
.tablewrap{overflow-x:auto}

/* footer */
footer{border-top:3px solid var(--kin);padding:64px 0 40px;background:var(--kinari2)}
body[data-accent=visit] footer{border-top-color:var(--ai)}
.marks{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:13.5px;margin-bottom:34px}
.marks span+span:before{content:"·";margin-right:26px;color:var(--kin)}
footer .faint{max-width:72ch}
footer nav{margin:22px 0 0;font-size:12px;letter-spacing:.14em}
footer nav a{margin-right:18px}

/* checkout drawer */
.scrim{position:fixed;inset:0;background:rgba(28,28,28,.45);opacity:0;
  pointer-events:none;transition:.25s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(430px,100vw);z-index:50;
  background:var(--kinari);border-left:var(--line);transform:translateX(102%);
  transition:transform .3s ease;overflow-y:auto;padding:34px 30px}
.drawer.on{transform:none}
.drawer h3{font-family:var(--fla);font-size:24px;letter-spacing:.08em;margin:0 0 26px}
.drawer .x{position:absolute;top:22px;right:22px;background:none;border:none;
  font-size:22px;cursor:pointer;color:var(--sumi45)}
.drawer label{display:block;font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--sumi45);margin:20px 0 8px}
.drawer select,.drawer input[type=email]{width:100%;font:400 15px/1.4 var(--fb);
  padding:13px 14px;border:var(--line);border-radius:2px;background:#fff;
  color:var(--sumi);outline:none;appearance:auto}
.drawer .note{font-size:12.5px;color:var(--sumi45);margin-top:6px}
.drawer .total{display:flex;justify-content:space-between;align-items:baseline;
  border-top:var(--line);margin-top:26px;padding-top:16px}
.drawer .total b{font-family:var(--fla);font-size:26px;font-weight:400}
.drawer .btn{width:100%;margin-top:22px}
.drawer .total i{font-style:normal;font-size:13px;color:var(--sumi45);
  font-variant-numeric:lining-nums tabular-nums}
.hold{margin-top:20px;padding:16px;border:var(--line);background:#fff;
  font-size:13.5px;line-height:1.7}
.hidden{display:none}

/* root chooser */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#E4DDCB;
  border:var(--line)}
.door{position:relative;display:block;background:var(--kinari);overflow:hidden}
.door img{aspect-ratio:3/4;object-fit:cover;width:100%;transition:transform .8s ease}
.door:hover img{transform:scale(1.03)}
.door .dl{position:absolute;left:14px;right:12px;bottom:12px;color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
.door .dl b{display:block;font-family:var(--fla);font-weight:500;font-size:20px;
  letter-spacing:.05em;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.door .dl span{font-size:12.5px;letter-spacing:.06em;line-height:1.45;display:block;
  text-shadow:0 1px 10px rgba(0,0,0,.85)}
.door .dl .dp{margin-top:5px;font-family:var(--fla);font-size:15px;
  letter-spacing:.04em;color:#fff}
.door img{filter:brightness(.88)}
@media(max-width:640px){.doors{grid-template-columns:1fr}.door img{aspect-ratio:16/10}}

/* hero anchors and urgency */
.was{color:var(--sumi45);font-size:.62em;font-family:var(--fb);letter-spacing:.02em;
  margin-left:10px}
.urgency{margin-top:18px;font-size:13.5px;color:var(--sumi70);
  border-left:2px solid var(--kin);padding-left:12px}
body[data-accent=visit] .urgency{border-left-color:var(--ai)}

/* experience strip */
.exp{padding:96px 0}
.exgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.excell{margin:0}
.excell img{aspect-ratio:3/4;object-fit:cover;width:100%}
.excell figcaption{margin-top:10px;font-size:14.5px;line-height:1.6;color:var(--sumi70)}
@media(max-width:760px){.exgrid{grid-template-columns:1fr 1fr;gap:14px}}

/* tile anchors */
.tile .was2{font-size:13px;color:var(--sumi45)}
.tile .was2 s{color:var(--sumi45)}
.tile .vs{color:var(--ai);font-size:13px}

/* foliage calendar */
.cal{border-top:var(--line);margin-top:8px}
.calrow{display:grid;grid-template-columns:44px 130px 1fr;gap:22px;
  padding:20px 0;border-bottom:var(--line);align-items:start}
.calja{writing-mode:vertical-rl;font-family:var(--fjp);font-size:17px;
  letter-spacing:.3em;color:var(--kin);line-height:1;padding-top:2px}
.caldate b{display:block;font-family:var(--fla);font-weight:400;font-size:26px;
  line-height:1.1}
.caldate span{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sumi45)}
.calit{margin:0;font-size:15.5px;color:var(--sumi70);max-width:56ch}
.foliage .myth{margin-top:26px}
.foliage p a{border-bottom:1px solid var(--kin)}
@media(max-width:640px){.calrow{grid-template-columns:34px 1fr;gap:14px}
 .calit{grid-column:2}}

/* footer languages */
.flangs{display:block;margin-top:10px;letter-spacing:.04em;font-size:13px;
  text-transform:none}

/* sticky buy bar */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--kinari);
  border-top:var(--line);transform:translateY(110%);transition:transform .3s ease}
.buybar.on{transform:none}
.buybar .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding-top:10px;padding-bottom:10px}
.buybar .bb{font-size:14px}
.buybar .bb b{font-family:var(--fla);font-size:19px;font-weight:400}
.buybar .bb s{color:var(--sumi45);font-size:12.5px;margin-left:6px}
.buybar .btn{padding:10px 24px}

/* legible section heads: small JA character + serif h2 */
.eyebrow.jl{font-family:var(--fjp);font-size:15px;letter-spacing:.5em;
  margin-bottom:10px}
h2.sec{margin:0 0 30px;color:var(--sumi)}

/* full-bleed interlude photograph */
.interlude{height:52svh;min-height:300px;overflow:hidden;border-top:var(--line)}
.interlude img{width:100%;height:100%;object-fit:cover}

/* experience: 3 columns of 3:4 */
.exgrid{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.exgrid{grid-template-columns:1fr 1fr}}

/* destinations */
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 22px}
.dcard{margin:0}
.dcard img{aspect-ratio:3/4;object-fit:cover;width:100%}
.dcard figcaption{margin-top:10px}
.dcard b{display:block;font-family:var(--fla);font-weight:400;font-size:20px;
  letter-spacing:.05em;margin-bottom:2px}
.dcard span{font-size:14.5px;line-height:1.6;color:var(--sumi70)}
@media(max-width:760px){.dgrid{grid-template-columns:1fr 1fr;gap:18px 14px}}

/* practical rows */
.prows{border-top:var(--line)}
.prow{display:grid;grid-template-columns:130px 1fr;gap:22px;padding:16px 0;
  border-bottom:var(--line)}
.prow b{font-weight:500;font-size:14px;letter-spacing:.06em}
.prow p{margin:0;font-size:15.5px;color:var(--sumi70)}
@media(max-width:640px){.prow{grid-template-columns:1fr;gap:2px}}

/* faq */
.faqlist{border-top:var(--line);max-width:680px}
.faqlist details{border-bottom:var(--line)}
.faqlist summary{cursor:pointer;padding:16px 0;font-weight:500;font-size:15.5px;
  list-style:none;position:relative;padding-right:30px}
.faqlist summary::-webkit-details-marker{display:none}
.faqlist summary:after{content:"+";position:absolute;right:2px;top:14px;
  font-family:var(--fla);font-size:20px;color:var(--kin)}
.faqlist details[open] summary:after{content:"−"}
.faqlist details p{margin:0 0 18px;font-size:15.5px;color:var(--sumi70);
  max-width:56ch}

/* buy bar, refined */
.buybar{border-top:2px solid var(--kin);background:var(--kinari)}
body[data-accent=visit] .buybar{border-top-color:var(--ai)}
.buybar .bb{display:flex;flex-direction:column;gap:1px;min-width:0}
.buybar .bb2{font-size:12px;color:var(--sumi45);letter-spacing:.02em}
.btn.ink{background:var(--sumi);border-color:var(--sumi);color:var(--kinari)}
.btn.ink:hover{filter:brightness(1.15)}
@media(max-width:640px){.buybar .bb2{display:none}}

/* arrival popup */
.pop{position:fixed;inset:0;z-index:60;background:rgba(28,28,28,.5);
  display:none;align-items:center;justify-content:center;padding:22px}
.pop.on{display:flex}
.popcard{position:relative;background:var(--kinari);border:1px solid var(--kin);
  border-radius:2px;max-width:430px;width:100%;padding:36px 34px 30px}
.popcard .x{position:absolute;top:14px;right:14px;background:none;border:none;
  font-size:20px;cursor:pointer;color:var(--sumi45)}
.poptate{position:absolute;top:34px;right:30px;writing-mode:vertical-rl;
  font-family:var(--fjp);font-size:15px;letter-spacing:.4em;color:var(--kin)}
.popcard h3{font-family:var(--fla);font-weight:400;font-size:23px;
  letter-spacing:.05em;margin:0 0 10px;padding-right:34px}
.popcard .muted{font-size:13.5px;line-height:1.7}
.popq{font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--sumi45);margin:18px 0 8px}
.popopts{display:flex;gap:8px;margin-bottom:16px}
.chip{font:400 13px/1 var(--fb);padding:10px 16px;border:var(--line);
  border-radius:2px;background:#fff;cursor:pointer;color:var(--sumi)}
.chip.sel{border-color:var(--sumi);background:var(--sumi);color:var(--kinari)}
.pop .lead{max-width:none}

/* hinomaru wordmark: the red disc off the corner of the final N */
svg.hino{display:inline-block;vertical-align:-.22em;width:1.15em;height:1.15em;
  margin-right:.55em}
.fbrand{font-size:15px;letter-spacing:.42em;color:var(--sumi)}

/* explore by interest: square tiles, label on the photograph */
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.itile{position:relative;margin:0;overflow:hidden}
.itile img{aspect-ratio:1/1;object-fit:cover;width:100%;transition:transform .8s ease}
.itile:hover img{transform:scale(1.04)}
.itile figcaption{position:absolute;left:12px;bottom:10px;color:#fff;
  font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  text-shadow:0 1px 12px rgba(0,0,0,.55)}
@media(max-width:760px){.igrid{grid-template-columns:1fr 1fr;gap:10px}}

/* the year, two columns of months */
.mgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;border-top:var(--line)}
.mrow{display:flex;gap:18px;padding:16px 0;border-bottom:var(--line)}
.mja{writing-mode:vertical-rl;font-family:var(--fjp);font-size:14px;
  letter-spacing:.25em;color:var(--kin);line-height:1;flex:none;padding-top:3px}
.mrow b{font-family:var(--fla);font-weight:400;font-size:17px;letter-spacing:.06em}
.mrow p{margin:2px 0 0;font-size:14.5px;color:var(--sumi70)}
@media(max-width:760px){.mgrid{grid-template-columns:1fr}}

/* visa */
.vline{max-width:62ch;font-size:15.5px;color:var(--sumi70);
  padding-left:14px;border-left:1px solid var(--kin)}

/* the plan table */
.ptable td{vertical-align:middle}
.ptable .pd b{font-family:var(--fla);font-size:22px;font-weight:400}
.ptable .ptag{margin-left:10px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ai);border:1px solid var(--kin);
  border-radius:2px;padding:3px 8px;white-space:nowrap}
.ptable .pc{color:var(--sumi70);font-size:14px;white-space:nowrap}
.ptable .them s{margin-right:8px}
.ptable .sv{color:var(--ai);font-size:13px;white-space:nowrap}
.ptable .pb{text-align:right}
.ptable .pb .btn{padding:9px 22px}
.ptable tr.hl td{background:var(--kinari);border-top:1px solid var(--kin);
  border-bottom:1px solid var(--kin)}
.ptable tr.hl .pd b{font-size:25px}
@media(max-width:640px){.ptable .pc{display:none}
 .ptable th:nth-child(2){display:none}}

/* checkout plan cards */
.plancards{display:flex;flex-direction:column;border:var(--line)}
.pcard{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:var(--line);background:#fff;cursor:pointer;
  font-size:13.5px}
.pcard:last-child{border-bottom:none}
.pcard b{font-weight:500}
.pcard i{font-style:normal;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ai);margin-left:8px}
.pcard em{font-style:normal;font-family:var(--fla);font-size:17px}
.pcard.sel{background:var(--kinari2);box-shadow:inset 2px 0 0 var(--sumi)}


/* month grid rows are links now */
a.mrow{color:var(--sumi)}
a.mrow:hover b{color:var(--ai)}
.mread{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ai);margin-top:4px}

/* month article pages */
.mhero{position:relative;height:44svh;min-height:280px;overflow:hidden}
.mhero img{width:100%;height:100%;object-fit:cover}
.mhero .tategaki{top:90px}
.article h1{margin-bottom:8px}
.msec{font-family:var(--fla);font-weight:400;font-size:21px;letter-spacing:.06em;
  margin:30px 0 8px;color:var(--sumi)}
.mtxt{max-width:60ch;color:var(--sumi70);font-size:16.5px}
.mnav{margin-top:38px;padding-top:18px;border-top:var(--line);
  font-family:var(--fjp);font-size:15px;letter-spacing:.1em;display:flex;
  flex-wrap:wrap;gap:12px 16px}
.mnav a{color:var(--sumi45)}
.mnav a.on{color:#BC002D;border-bottom:1px solid var(--kin)}
.mnav a:hover{color:var(--ai)}
.longer{margin:26px 0 10px}


/* chooser: the big /visit door and the five files */
.maindoor{display:block;position:relative;cursor:pointer}
.maindoor .mdl{position:absolute;left:clamp(24px,6vw,80px);bottom:40px;color:#fff;
  text-shadow:0 1px 16px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:6px}
.maindoor .mdl b{font-family:var(--fla);font-weight:400;
  font-size:clamp(28px,4.4vw,48px);letter-spacing:.03em}
.maindoor .mdl>span:not(.btn){font-size:15px;letter-spacing:.06em}
.maindoor .mdl .btn{margin-top:14px;align-self:flex-start;text-shadow:none}
.doors.five{grid-template-columns:repeat(5,1fr);background:none;border:none;gap:14px}
.doors.five .door img{aspect-ratio:3/4}
@media(max-width:860px){.doors.five{grid-template-columns:repeat(2,1fr)}
 .doors.five .door:last-child{grid-column:span 2}
 .doors.five .door:last-child img{aspect-ratio:16/9}}

/* segment lead form: stacked, roomy */
.seglead{flex-direction:column;max-width:430px;gap:10px}
.seglead input{border:var(--line);border-radius:2px}
.seglead .btn{border-radius:2px;align-self:flex-start}


.filesec{padding-top:96px}


.segcontact .lead-msg{margin-top:8px}

/* ------------------------------------------------- the conference-week calendar
   The only calendar anyone publishes for KBW side events, so it has to look
   like a document rather than a promo: hairlines, one gold accent, and a status
   tag on every single row. */
.tline .truth{max-width:64ch}
.legend{display:flex;flex-wrap:wrap;gap:26px;margin:34px 0 8px;padding:20px 0;
  border-top:var(--line);border-bottom:var(--line)}
.legend .lg{display:flex;gap:12px;align-items:flex-start;flex:1 1 250px}
.legend p{margin:0;font-size:13.5px;line-height:1.6;color:var(--sumi70)}
.tg{display:inline-block;white-space:nowrap;font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;padding:5px 11px;border-radius:2px;border:1px solid;
  line-height:1.2;flex:none}
.tg.confirmed{color:#8A7433;border-color:var(--kin);background:rgba(199,179,127,.16)}
.tg.invite{color:var(--ai);border-color:rgba(22,94,131,.4);background:rgba(22,94,131,.07)}
.tg.tracked{color:var(--sumi45);border-color:#DED7C6;background:transparent}
.tdays{margin-top:8px}
.tday{display:grid;grid-template-columns:190px 1fr;gap:34px;padding:34px 0;
  border-bottom:var(--line)}
.twhen .tw{display:block;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--kin)}
.twhen .tl{display:block;font-family:var(--fla);font-size:26px;line-height:1.25;
  margin-top:8px;letter-spacing:.02em}
.tnote{max-width:64ch;font-size:15.5px;color:var(--sumi70);margin:0 0 20px}
ul.tevs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.tev{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;
  padding:16px 18px;background:rgba(255,255,255,.55);border:var(--line)}
.tevn{display:block;font-weight:500;font-size:16px;letter-spacing:.01em}
.tevw{display:block;font-size:13.5px;color:var(--sumi45);margin-top:2px}
.tevp{margin:9px 0 0;font-size:14.5px;line-height:1.7;color:var(--sumi70);max-width:64ch}
.tevs{display:block;font-size:12px;letter-spacing:.04em;color:var(--sumi45);margin-top:9px}
.dual{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  margin-top:34px;padding:26px 28px;background:var(--sumi);color:var(--kinari)}
.dual b{font-family:var(--fla);font-size:22px;font-weight:400;letter-spacing:.02em}
.dual p{margin:8px 0 0;font-size:15px;color:#CFC8B8;max-width:62ch}
.dual .btn.ghost{border-color:var(--kin);color:var(--kin)}
.dual .btn.ghost:hover{background:var(--kin);color:var(--sumi)}
.tfoot{margin-top:26px;max-width:70ch}
@media(max-width:720px){
  .tday{grid-template-columns:1fr;gap:14px}
  .tev{grid-template-columns:1fr;gap:10px}
  .dual{grid-template-columns:1fr;gap:18px}
}
.tevfoot{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-top:10px}
.tevfoot .tevs{margin-top:0}
.tevgo{font-size:13px;letter-spacing:.06em;color:var(--ai);border-bottom:1px solid
  rgba(22,94,131,.35);padding-bottom:1px;white-space:nowrap}
.tevgo:after{content:' \2192'}
.tevgo:hover{border-bottom-color:var(--ai)}

/* ------------------------------------------------------- selling, not listing
   The page sells an eSIM. The calendar under it is evidence, not the product,
   so the failure state and the price come first and read louder. */

/* the countdown to doors, in the hero. NB .doors is already the root chooser
   grid in this stylesheet, hence .dcount. */
.dcount{display:flex;align-items:baseline;gap:9px;margin:20px 0 0;font-size:12.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--sumi45)}
.dcount b{font-family:var(--fla);font-size:26px;letter-spacing:0;color:var(--shu);
  text-transform:none;line-height:1}

/* what stops working when you land */
.stakes .truth{max-width:62ch}
.stks{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:38px;
  background:#E4DDCB;border:var(--line)}
.stk{background:var(--kinari);padding:30px 32px}
.stk b{display:block;font-family:var(--fla);font-size:26px;font-weight:600;
  letter-spacing:.02em;line-height:1.3;margin-bottom:12px}
.stk b:before{content:'';display:block;width:26px;height:2px;background:var(--shu);
  margin-bottom:16px}
.stk p{margin:0;font-size:16px;color:var(--sumi70);max-width:34ch}

/* the price, the deadline and the button, in the hero. This is a shop. */
.buybox{display:flex;align-items:center;gap:34px;flex-wrap:wrap;margin:30px 0 8px;
  padding:22px 26px;border:1px solid var(--shu);background:rgba(235,98,56,.06)}
.bxp b{display:block;font-family:var(--fla);font-weight:700;
  font-size:clamp(38px,5vw,54px);line-height:1;color:var(--shu);letter-spacing:0}
.bxp span{display:block;margin-top:6px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--sumi45)}
.bxo{border-left:1px solid rgba(235,98,56,.35);padding-left:32px}
.offk{display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sumi45)}
.offcd{display:block;margin-top:4px;font-size:13px;letter-spacing:.05em;
  color:var(--sumi45)}
.offcd i{font-family:var(--fla);font-style:normal;font-weight:700;font-size:30px;
  color:var(--sumi);letter-spacing:0}
.bxthen{display:block;margin-top:4px;font-size:12.5px;color:var(--sumi45)}
.bxb{margin-left:auto;padding:18px 42px;font-size:14px;font-weight:600}
.buybox.over .bxo{display:none}
.offnote{margin:0 0 26px;font-size:14px;letter-spacing:.02em;color:var(--sumi70)}

/* heavier display type: the elegance was costing us legibility */
h1{font-weight:600}
h2{font-weight:600}
.stk b{font-weight:600}
.twhen .tl{font-weight:600}
.tile .p{font-weight:700}
.dual b{font-weight:600}
.hook .truth{font-size:18px;color:var(--sumi);max-width:44ch}
.stk p,.tnote{color:var(--sumi70)}

/* why now, under the shop */
.buynow .cta{margin-top:34px}

/* the calendar is quieter now: it is proof, not the pitch */
.tline .tlcta{max-width:60ch;font-size:15.5px;color:var(--sumi);margin:0 0 30px;
  padding-left:16px;border-left:2px solid var(--shu)}
.tday{padding:28px 0}
.twhen .tl{font-size:22px}
.tnote{font-size:15px;margin-bottom:16px}
.tevn{font-size:15.5px}
.tevp{font-size:14px;margin-top:7px}
.tev{padding:14px 16px}

@media(max-width:720px){
  .stks{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr;gap:18px}
  .offr{text-align:left}
}

@media(max-width:720px){
  .buybox{gap:20px;padding:20px}
  .bxo{border-left:0;padding-left:0}
  .bxb{margin-left:0;width:100%}
}

/* Cormorant defaults to oldstyle figures, which makes a price look like a date.
   Every number that has to be read at a glance gets lining, tabular figures. */
.bxp b,.offcd i,.dcount b,.tile .p,.tile .was2,.ptable .us,.ptable .them,
.total b,.pcard em,.twhen .tw,.buybar .bb1{font-variant-numeric:lining-nums tabular-nums}

/* On a phone the hero photo was eating a full screen before the price. The
   product has to be reachable in about one flick, so the image gives way. */
@media(max-width:720px){
  .mhero{height:30svh;min-height:190px}
  .hook{padding:38px 0 56px}
  .hook h1{font-size:clamp(28px,8vw,38px)}
  .hook .truth{font-size:16.5px;margin-bottom:26px}
  .evmeta{font-size:13.5px;gap:4px 14px;margin:10px 0 16px}
  .buybox{margin-top:22px}
  .dcount{margin-top:16px}
}
@media(max-width:720px){
  .evmeta{line-height:1.55}
  .evmeta span{display:block}
}

/* the hero meta is one line now, not a three-line stack of labels */
.hook .evmeta{display:block;font-size:14px;letter-spacing:.02em;color:var(--sumi45);
  margin:12px 0 22px}
.instl{margin:12px 0 0;font-size:13.5px;color:var(--sumi45)}
.tile.pick{outline:1px solid var(--shu);outline-offset:-1px}
.covers{margin:10px 0 16px;font-size:14px;line-height:1.6;color:var(--sumi);
  padding-left:12px;border-left:2px solid var(--shu)}
.tevfoot{margin-top:8px}

/* the recommended tile carries an extra line, so the row has to stay level and
   the buttons have to stay on one baseline */
.tiles>.tile{display:flex;flex-direction:column}
.tile .covers{flex:1}
.tile .btn{margin-top:auto;align-self:flex-start}

/* -------------------------------------------------- what this product is
   One statement, under the price, then the facts as chips. */
.brandline{padding:64px 0;border-top:var(--line)}
h2.bl{font-family:var(--fla);font-weight:700;font-size:clamp(26px,3.4vw,40px);
  letter-spacing:.01em;margin-bottom:14px;max-width:16em}
.brandline .truth{max-width:56ch;margin-bottom:26px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;padding:9px 16px;border:var(--line);
  border-radius:2px;background:var(--kinari);font-size:13px;letter-spacing:.05em;
  color:var(--sumi)}
.chip:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--shu);
  margin-right:9px;flex:none}

/* -------------------------------------------------------- the comparison */
.ctable{width:100%;border-collapse:collapse;font-size:14.5px}
.ctable th,.ctable td{padding:14px 16px;border-bottom:var(--line);text-align:left;
  vertical-align:top}
.ctable thead th{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sumi45);font-weight:400;border-bottom:1px solid var(--sumi)}
.ctable thead th.mine{color:var(--shu);font-weight:600}
.ctable th[scope=row]{font-weight:400;color:var(--sumi);width:31%;
  font-family:var(--fb)}
.ctable td{color:var(--sumi45)}
.ctable td.y{color:var(--sumi)}
.ctable td.n{color:var(--sumi45)}
.ctable td.mine{color:var(--sumi);font-weight:600;background:rgba(235,98,56,.06);
  font-variant-numeric:lining-nums tabular-nums}
.ctable tr:last-child td,.ctable tr:last-child th{border-bottom:0}

/* ------------------------------------------------------------- the proof */
.proof{padding:84px 0}
.pfs3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:#E4DDCB;
  border:var(--line)}
.pf{background:var(--kinari);padding:28px 30px}
.pf b{display:block;font-family:var(--fla);font-weight:600;font-size:22px;
  line-height:1.3;margin-bottom:12px}
.pf p{margin:0 0 14px;font-size:14.5px;color:var(--sumi70)}
.pfs{font-size:12.5px;letter-spacing:.05em;color:var(--ai);
  border-bottom:1px solid rgba(22,94,131,.3)}
.pfs:after{content:' \2197'}
.mkh{font-family:var(--fla);font-weight:600;font-size:24px;margin:52px 0 18px}
.mks{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.mk b{display:block;font-size:14px;letter-spacing:.06em;margin-bottom:7px}
.mk b:before{content:'';display:block;width:20px;height:2px;background:var(--shu);
  margin-bottom:12px}
.mk p{margin:0;font-size:14px;color:var(--sumi70)}

@media(max-width:900px){
  .pfs3{grid-template-columns:1fr}
  .mks{grid-template-columns:1fr 1fr}
  .ctable{font-size:13.5px}
  .ctable th,.ctable td{padding:11px 10px}
}
@media(max-width:640px){ .mks{grid-template-columns:1fr} }
/* row labels were inheriting the uppercase/letterspaced th rule and shouting */
.ctable th[scope=row]{text-transform:none;letter-spacing:0;font-size:14.5px;
  line-height:1.5}

/* ------------------------------------------------- the confidence cue
   Drawn, not photographed. Commons has no free photo of somebody happily on a
   call at an event; the near misses are identifiable private people in front of
   another conference's branding, which cannot go on a product page. */
.sig{position:absolute;left:24px;bottom:24px;z-index:3;display:flex;align-items:center;
  gap:12px;padding:12px 18px;border-radius:3px;background:rgba(251,250,245,.93);
  backdrop-filter:blur(8px);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.sig .bars{display:flex;align-items:flex-end;gap:3px;height:18px}
.sig .bars i{width:4px;background:var(--shu);border-radius:1px}
.sig .bars i:nth-child(1){height:6px}
.sig .bars i:nth-child(2){height:10px}
.sig .bars i:nth-child(3){height:14px}
.sig .bars i:nth-child(4){height:18px}
.sig b{font-family:var(--fla);font-weight:700;font-size:21px;letter-spacing:.02em;
  color:var(--sumi);font-variant-numeric:lining-nums}
.sig .sigl{font-size:12.5px;letter-spacing:.05em;color:var(--sumi70);
  border-left:var(--line);padding-left:12px;font-variant-numeric:lining-nums tabular-nums}

/* secondary actions are links, not buttons competing with Buy */
.sublinks{display:flex;flex-wrap:wrap;gap:24px;margin:20px 0 0;align-items:center}
.lnk{background:none;border:0;padding:0;cursor:pointer;font-family:var(--fb);
  font-size:14px;letter-spacing:.02em;color:var(--ai);
  border-bottom:1px solid rgba(22,94,131,.3)}
.lnk:hover{border-bottom-color:var(--ai)}

/* the pain points are marked as failures */
.stks{grid-template-columns:repeat(3,1fr)}
.stk{position:relative;padding:26px 28px}
.stk .x{display:block;font-size:20px;line-height:1;color:var(--shu);margin-bottom:12px;
  font-family:var(--fb)}
.stk b:before{display:none}
.stk b{font-size:21px;margin-bottom:9px}
.stk p{font-size:15px;max-width:30ch}

/* the USP chips get a tick */
.chip:before{content:'\2713';width:auto;height:auto;border-radius:0;background:none;
  color:var(--shu);font-size:12px;margin-right:8px}

/* the shop is the loudest heading on the page */
#pricing h2.sec{font-size:clamp(28px,3.8vw,44px);font-weight:700}
.tile .tag{color:var(--shu);font-weight:600}
.tile.pick{outline:2px solid var(--shu);background:rgba(235,98,56,.04)}

@media(max-width:1000px){ .stks{grid-template-columns:repeat(2,1fr)} }
@media(max-width:640px){ .stks{grid-template-columns:1fr} .sig{left:14px;bottom:14px;
  gap:9px;padding:9px 13px} .sig .sigl{display:none} }

/* ---------------------------------------------------------- headline breaks
   Sentences break at the full stop, not wherever the line runs out. */
h1,h2.bl{text-wrap:balance}
.hook h1{max-width:20em}
.hook h1 br{display:block}

/* USP block: statement and ticks on the left, a conference frame on the right */
.blsplit{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.blimg{margin:0;overflow:hidden;border:var(--line)}
.blimg img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.chips{display:grid;gap:0;margin:26px 0 0;padding:0;list-style:none;
  border-top:var(--line)}
.chip{display:flex;align-items:center;padding:12px 0;border-bottom:var(--line);
  border-radius:0;background:none;font-size:15.5px;letter-spacing:.01em;
  color:var(--sumi)}
.chip:before{content:'\2713';color:#1F7A4D;font-size:14px;font-weight:700;
  margin-right:14px;width:20px;flex:none}

/* the risk list: labels only, marked as failures */
.stks{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0;padding:0;
  list-style:none;border-top:var(--line);border-left:var(--line)}
.stk{display:flex;align-items:center;gap:12px;padding:20px 22px;
  border-right:var(--line);border-bottom:var(--line);background:var(--kinari)}
.stk .x{margin:0;font-size:17px;line-height:1;color:var(--shu);flex:none}
.stk b{font-family:var(--fb);font-weight:400;font-size:15.5px;line-height:1.4;
  margin:0;letter-spacing:.01em}
.stk b:before{display:none}

/* the shop leads with one offer band */
.feature{position:relative;display:grid;grid-template-columns:1fr auto;gap:34px;
  align-items:center;margin:0 0 26px;padding:34px 36px;background:var(--sumi);
  color:var(--kinari);border:1px solid var(--sumi)}
.ftag{position:absolute;top:-13px;left:28px;background:var(--shu);color:#fff;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:6px 15px;
  border-radius:2px;font-weight:600}
.feature .fl b{display:block;font-family:var(--fla);font-weight:700;
  font-size:clamp(24px,3vw,34px);letter-spacing:.02em}
.feature .fl p{margin:9px 0 0;font-size:15px;color:#CFC8B8;max-width:52ch}
.fr{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.fp{font-family:var(--fla);font-weight:700;font-size:clamp(36px,4.6vw,52px);
  color:#fff;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.fr .was{color:#8E877A;text-decoration:line-through;font-size:16px;
  font-variant-numeric:lining-nums}
.fr .pct{background:var(--shu);color:#fff;font-size:13px;font-weight:600;
  padding:4px 10px;border-radius:2px}

/* speakers, on the way to the event list */
.spkh{font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sumi45);margin:34px 0 16px}
.spks{display:grid;grid-template-columns:repeat(8,1fr);gap:14px}
.spk{margin:0;text-align:center}
.spk img,.spk .mono{display:block;width:100%;aspect-ratio:1;object-fit:cover;
  border-radius:50%;background:var(--kinari2)}
.spk .mono{display:flex;align-items:center;justify-content:center;
  font-family:var(--fla);font-size:22px;color:var(--sumi45)}
.spk figcaption b{display:block;margin-top:10px;font-weight:500;font-size:13px;
  line-height:1.3}
.spk figcaption span{display:block;font-size:12px;color:var(--sumi45);margin-top:2px}
.connect .cta{margin-top:34px}

/* the last word before the footer */
.footcta{padding:76px 0;background:var(--sumi);color:var(--kinari);border-top:0}
.footcta h2{font-family:var(--fla);font-weight:700;color:#fff;
  font-size:clamp(28px,3.8vw,44px);margin-bottom:12px}
.footcta p{color:#CFC8B8;max-width:56ch;margin-bottom:28px;font-size:16.5px}
.evhook{padding-top:96px}

@media(max-width:1000px){
  .blsplit{grid-template-columns:1fr;gap:32px}
  .stks{grid-template-columns:repeat(2,1fr)}
  .spks{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:640px){
  .stks{grid-template-columns:1fr}
  .spks{grid-template-columns:repeat(3,1fr)}
  .feature{grid-template-columns:1fr;gap:22px;padding:30px 24px}
  .fr{justify-content:flex-start}
}
/* portraits must be square: an img with width/height attributes plus a CSS
   width keeps the attribute height and renders an oval. See the same trap noted
   on esimango's hero layers. */
.spks .spk img,.spks .spk .mono{width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;object-position:center 22%}

/* the ticks needed air, and the list needed a frame it is not glued to */
.chips{border-top:0;border:var(--line);background:var(--kinari);padding:6px 22px}
.chip{padding:14px 0;align-items:flex-start;line-height:1.5}
.chip:last-child{border-bottom:0}
.chip:before{margin-right:16px;margin-top:2px}

/* what opens normally, named rather than logo-stamped: reproducing their marks
   on a page that sells something implies an endorsement none of them gave */
.appsh{margin:44px 0 14px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--sumi45)}
.apps{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.apps li{padding:8px 15px;border:var(--line);border-radius:2px;background:var(--kinari);
  font-size:13.5px;letter-spacing:.02em;color:var(--sumi70)}

/* the comparison header rule now runs the full width of the table */
.ctable thead th{border-bottom:1px solid var(--sumi)}
.ctable thead th.corner{border-bottom:1px solid var(--sumi)}
.ctable{table-layout:fixed}
.ctable th[scope=row]{width:29%}

/* the saving, inside the checkout */
.tot2{display:flex;align-items:baseline;gap:10px}
.tot2 s{color:var(--sumi45);font-size:15px;font-variant-numeric:lining-nums}
.cksave{margin:6px 0 18px;font-size:13.5px;color:var(--shu);letter-spacing:.02em}
/* the plan list inside the checkout carries the same struck price the page does */
.pcard{align-items:flex-start;padding:14px}
.pcard em{white-space:nowrap;display:flex;align-items:baseline;gap:8px;
  font-variant-numeric:lining-nums tabular-nums}
.pcard em s{font-family:var(--fb);font-size:13px;color:var(--sumi45)}
.poff{display:inline-block;margin-left:8px;background:var(--shu);color:#fff;
  font-size:10px;font-weight:600;letter-spacing:.06em;padding:2px 7px;border-radius:2px;
  vertical-align:1px}
.pcard i{color:var(--shu);font-weight:600}
/* Recommended + the discount chip have to share one line */
.pcard i{font-size:9.5px;letter-spacing:.12em;margin-left:7px}
.poff{margin-left:6px;font-size:9.5px;padding:2px 6px}
.pcard span{display:flex;align-items:center;flex-wrap:wrap;gap:0}

/* ------------------------------------------------ the USP list, done properly
   It was a list with its own border sitting inside another border, and the last
   row landed on the frame. One frame, one rhythm, room to breathe. */
.chips{border:0;background:none;padding:0;margin:26px 0 0;
  border-top:1px solid #E4DDCB}
.chip{padding:16px 4px 16px 0;border-bottom:1px solid #E4DDCB;align-items:flex-start;
  font-size:16px;line-height:1.55;background:none}
.chip:before{margin:2px 16px 0 0}
.blsplit{align-items:start}
.blimg img{aspect-ratio:3/4}

/* logos, running */
.marquee{overflow:hidden;margin:6px 0 14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mtrack{display:flex;align-items:center;gap:56px;width:max-content;
  padding:18px 28px;animation:mrun 42s linear infinite}
.marquee:hover .mtrack{animation-play-state:paused}
.lg{display:flex;align-items:center;height:34px;flex:none}
.lg img{height:100%;width:auto;max-width:140px;object-fit:contain}
@keyframes mrun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .mtrack{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}
.appsn{margin:0 0 4px;font-size:12.5px}

/* No scrollbars anywhere: Su's call. Wheel, trackpad, touch, Page Down, Home
   and End all still scroll, and the keyboard still works; what goes is the
   track and the thumb. Reserving a gutter is pointless once nothing is drawn in
   it, so that goes too, and with no gutter to lose the page no longer jumps
   sideways when the drawer locks the body. */
html,body{scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
.drawer,.tablewrap,.marquee{scrollbar-width:none;overscroll-behavior:contain}
.drawer::-webkit-scrollbar,.tablewrap::-webkit-scrollbar,
.marquee::-webkit-scrollbar{width:0;height:0;display:none}
.cksave{margin:6px 0 0}

/* reviews, for when there are real ones */
.rvs{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.rv{margin:0;background:var(--kinari);border:var(--line);padding:26px 24px}
.rv blockquote{margin:0 0 16px;font-size:15.5px;line-height:1.7;color:var(--sumi)}
.rv figcaption b{display:block;font-size:14px;font-weight:500}
.rv figcaption span{display:block;font-size:13px;color:var(--sumi45)}
@media(max-width:900px){.rvs{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.rvs{grid-template-columns:1fr}}

/* section headings were too quiet to carry the page */
h2{font-size:clamp(30px,4vw,52px);font-weight:700;letter-spacing:-.005em;
  line-height:1.14}
h2.sec{margin:0 0 26px}
h2.bl{font-size:clamp(30px,4vw,52px);font-weight:700}
.hook h1{font-size:clamp(34px,5.6vw,68px);font-weight:700;line-height:1.1}
.hook .truth{font-size:clamp(17px,1.7vw,21px);color:var(--sumi);max-width:34ch;
  margin-top:18px}
.hook .evmeta{margin:0 0 16px;color:var(--sumi45)}
.hook .eyebrow.jl{margin-bottom:14px}
.footcta h2{color:#fff}

/* every logo occupies the same box, so a wordmark and an icon read as equals */
.lg{width:132px;height:40px;justify-content:center}
.lg img{max-height:100%;max-width:100%;height:auto;width:auto;object-fit:contain}
.mtrack{gap:26px;padding:22px 24px}

/* the second eSIM */
.ups{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  margin:22px 0 0;padding:16px 16px;border:1px solid var(--shu);
  background:rgba(235,98,56,.05);cursor:pointer}
.ups input{margin:3px 0 0;width:16px;height:16px;accent-color:var(--shu)}
.ups b{display:block;font-size:14.5px;font-weight:500}
.ups i{font-style:normal;background:var(--shu);color:#fff;font-size:10.5px;
  font-weight:600;letter-spacing:.05em;padding:2px 7px;border-radius:2px;
  margin-left:6px;vertical-align:1px}
.ups em{display:block;font-style:normal;font-size:12.5px;line-height:1.55;
  color:var(--sumi70);margin-top:6px}
/* .drawer label is the uppercase field caption; the upsell is a real sentence */
.drawer label.ups{text-transform:none;letter-spacing:0;color:var(--sumi);
  font-size:14.5px;margin:22px 0 0}
.ups em{text-transform:none;letter-spacing:0}

/* the standfirst breaks where the sentence does */
.hook .truth{max-width:none}
.hook .truth br{display:block}

/* the ticks needed room off the left edge */
.chip{padding-left:16px}
.chip:before{margin-right:18px}

/* four plans in one row under the feature band */
.tiles{grid-template-columns:repeat(4,1fr)}

/* the shop heading is the loudest thing on the page */
#pricing h2.sec{font-size:clamp(32px,5vw,64px);line-height:1.08}

/* "everything opens the way it does at home" is a heading, not a caption */
h2.appsh{margin:52px 0 10px;font-size:clamp(26px,3.2vw,42px);font-weight:700;
  letter-spacing:-.005em;text-transform:none;color:var(--sumi)}

@media(max-width:1100px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}
/* the section label is Latin now: the Japanese serif and its .5em tracking made
   English read as a ransom note */
.eyebrow.jl{font-family:var(--fb);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--kin)}

/* the USP photo matches the height of the list beside it instead of hanging
   below it: the column decides, not the picture's own aspect ratio */
.blsplit{align-items:stretch}
.blimg{height:100%;min-height:0}
.blimg img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;
  object-position:center 28%}

/* a full-bleed conference band between the shop and the speakers */
.band{margin:0;overflow:hidden;height:clamp(220px,26vw,380px)}
.band img{width:100%;height:100%;object-fit:cover;object-position:center 34%}
/* the deadline, restated where the last price is shown */
.fctag{display:inline-flex;align-items:center;gap:10px;margin:0 0 20px;padding:8px 16px;
  border:1px solid var(--shu);border-radius:2px;background:rgba(235,98,56,.14);
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#F4A98D}
.fctag b{color:#fff;font-weight:600}
.fctag span{font-variant-numeric:lining-nums tabular-nums;color:#fff;
  letter-spacing:.04em;font-size:13px}

/* the front door reads like the rest of the site now */
.hero.home{height:clamp(420px,58svh,640px)}
.hero.home .mdl b{font-family:var(--fla);font-weight:700;
  font-size:clamp(32px,5vw,62px);line-height:1.1;letter-spacing:-.005em;
  max-width:16em}
.hero.home .mdl span{font-size:clamp(15px,1.5vw,19px);max-width:52ch}
.evgrid{gap:22px}
.evcard .evbody{padding:20px 22px 24px}
.evbody b{font-weight:700;font-size:clamp(20px,2vw,26px);letter-spacing:-.005em;
  color:var(--sumi)}
.evbody .when{font-size:13.5px;margin-top:8px;color:var(--sumi45)}
/* the flag sits where the city name used to, in the corner of the photo */
.evcard{position:relative}
.evflag{position:absolute;top:12px;right:14px;z-index:2;line-height:1;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.45))}
.evflag .flag{font-size:26px}
/* Windows has no flag glyphs and falls back to the two country letters, so the
   chip is sized and boxed to look deliberate either way. */
.flag{font-size:19px;line-height:1;letter-spacing:0;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",var(--fb)}
.evbody .from{margin-top:14px;font-family:var(--fla);font-weight:700;font-size:24px;
  color:var(--shu);font-variant-numeric:lining-nums tabular-nums}
.evbody .from span{font-family:var(--fb);font-size:12px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sumi45);
  margin-right:5px;vertical-align:2px}
.evbody .soonlbl{color:var(--sumi45)}
a.evcard:hover{box-shadow:0 12px 34px rgba(28,28,28,.10)}

/* The USP photo must not decide the row height. It was a 3:4 file in a stretched
   grid cell, so its own aspect ratio drove the row and it hung well below the
   last tick. The grid stretches the frame to whatever the list needs, and the
   photo is taken out of flow so it can only fill that frame, never set it.
   NB: no percentage min-height here. Against an auto-height parent it resolves
   to zero and the picture vanishes. */
.blimg{position:relative;height:auto;align-self:stretch;overflow:hidden}
.blimg img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;
  object-fit:cover;object-position:center 26%}
/* Stacked layout: there is no text column beside it to borrow a height from, so
   the absolutely-positioned photo has nothing to fill and collapses to nothing.
   Give the frame a definite height once the columns break. */
@media(max-width:1000px){
  .blimg{height:clamp(240px,54vw,420px);align-self:auto}
}

/* the hero price is a FROM price, and says so in a word rather than in fine print */
.bxp u{display:block;text-decoration:none;font-family:var(--fb);font-size:11px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sumi45);margin-bottom:2px}

/* a week that has already happened, so nobody reads its dates as upcoming */
.chipast{display:inline-block;margin-left:9px;padding:2px 8px;border-radius:2px;
  background:var(--kinari2);border:var(--line);color:var(--sumi45);
  font-family:var(--fb);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;vertical-align:1px}

/* line under the logo on crypto-event pages */
.brandbox{display:flex;flex-direction:column;gap:9px}
.pby{font-family:var(--fb);font-size:11px;letter-spacing:.12em;line-height:1;
  color:rgba(255,255,255,.82)}

/* powered-by line: plain text, no underline */
.pby{display:inline-flex;align-items:center;flex-wrap:wrap;gap:7px}
.pby a,.pby a:hover{color:#fff;border:0;text-decoration:none}
.pbysep{opacity:.6}

/* each half keeps its words and its logo together; smaller on phones */
.pbyu{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
@media(max-width:640px){
  .pby{gap:5px;font-size:10px;letter-spacing:.04em}
}

/* scrim behind the header so logo, powered-by line and city label read on any photo */
header{background:linear-gradient(180deg,rgba(18,18,18,.84) 0%,rgba(18,18,18,.62) 64%,rgba(18,18,18,0) 100%);
  padding-bottom:36px}

/* wordmark + powered-by: a thin Cormorant at 17px vanished over busy photos (Su, 15 Sep).
   Sans 600, tighter tracking, one line on phones. */
.brand{font-family:var(--fb);font-weight:600;font-size:17px;letter-spacing:.16em;white-space:nowrap}
.pby{font-weight:500;color:#fff;font-size:13px;letter-spacing:.05em}
@media(max-width:640px){
  .brand{font-size:13px;letter-spacing:.1em}
  .pby{font-size:11px;letter-spacing:.03em}
}

/* a week the host has not dated yet */
.tg.unannounced{color:var(--sumi45);border-color:#DED7C6;background:rgba(0,0,0,.03)}


/* event picker */
.evgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.evcard{position:relative;display:block;margin:0;overflow:hidden;background:#fff;
  border:var(--line)}
.evcard img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .8s ease}
.evcard:hover img{transform:scale(1.03)}
.evbody{padding:16px 18px 20px}
.evbody b{display:block;font-family:var(--fla);font-weight:400;font-size:21px;
  letter-spacing:.03em;margin-bottom:4px}
.evbody .when{font-size:13px;color:var(--sumi70)}
.evbody .from{margin-top:10px;font-family:var(--fla);font-size:17px}
.evbody .soonlbl{margin-top:10px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ai)}
.evja{position:absolute;top:12px;right:14px;color:#fff;font-size:12px;
  letter-spacing:.14em;text-shadow:0 1px 10px rgba(0,0,0,.7)}
.soongrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.soongrid .soonfig{pointer-events:none;opacity:.62}
@media(max-width:1180px){.soongrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.evgrid,.soongrid{grid-template-columns:1fr}}
/* a busy night skyline eats white type, so lay a scrim under it */
.hero:after{content:"";position:absolute;inset:auto 0 0;height:62%;
  background:linear-gradient(to top,rgba(12,12,16,.82),rgba(12,12,16,.45) 42%,transparent);
  pointer-events:none}
.hero .mdl{position:absolute;z-index:2;left:clamp(24px,6vw,80px);bottom:44px;color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.75);display:flex;flex-direction:column;gap:8px}
.hero .mdl b{font-family:var(--fla);font-weight:400;
  font-size:clamp(28px,4.4vw,46px);letter-spacing:.03em}
.hero .mdl span{font-size:15px;letter-spacing:.06em}
.hero{position:relative}
.evmeta{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 18px;font-size:14px}
.evmeta b{font-weight:500}
.note{max-width:62ch;font-size:14px;color:var(--sumi70);padding-left:14px;
  border-left:2px solid var(--kin);margin-top:22px}
/* cross-sell to fizen.io/esim, above the footer */
section.onward{padding:56px 0 64px}
.onw{display:flex;align-items:center;justify-content:space-between;gap:28px;
  padding:28px 32px;border:var(--line);border-radius:16px;background:var(--kinari)}
.onw .eyebrow{margin-bottom:0}
.onw h3{font-size:22px;font-weight:600;line-height:1.35;margin-top:8px}
.onw p{margin:6px 0 0;font-size:15px;color:var(--sumi45)}
.onw .btn{flex:none}
@media(max-width:720px){.onw{flex-direction:column;align-items:flex-start;padding:24px 22px}
  .onw .btn{width:100%}}

/* checkout page: one page per destination on sale, reached from every buy
   button. Nothing floats, so the chat bubble can never sit on the pay button. */
body.ckpage{background:var(--kinari2)}
header.ckbar{position:static;inset:auto;color:var(--sumi);background:var(--kinari);
  border-bottom:var(--line)}
header.ckbar .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;
  align-items:center;min-height:68px;padding-top:0}
.ckbar .brand{justify-self:center;color:var(--sumi);font-size:14px;letter-spacing:.3em}
.ckback{justify-self:start;font-size:14.5px;color:var(--sumi70)}
.ckback:hover{color:var(--sumi)}
.cksec{justify-self:end;display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--sumi45)}
.cksec svg{width:15px;height:15px}
.ckmain{padding:30px 0 140px}
.ckgrid{display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:30px;align-items:start}
.ckleft,.ckcard{background:#fff;border:var(--line);border-radius:3px;padding:30px}
.ckprod{display:flex;gap:18px;align-items:center;padding-bottom:18px;border-bottom:var(--line)}
.ckprod img{width:84px;height:84px;object-fit:cover;flex:none;border-radius:2px}
.ckprod .eyebrow{margin-bottom:8px}
.ckprod h1{font-size:clamp(22px,2.6vw,30px);line-height:1.25;margin:0}
.ckh{display:flex;align-items:center;gap:10px;font-family:var(--fb);font-size:16px;
  font-weight:500;letter-spacing:.01em;margin:22px 0 12px}
.ckh i{width:23px;height:23px;border-radius:50%;background:var(--sumi);color:var(--kinari);
  font-style:normal;font-size:12.5px;display:inline-flex;align-items:center;
  justify-content:center;flex:none}
.ckplans{display:grid;gap:8px}
.ckgh{margin:4px 0 2px;font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--sumi45)}
.ckgh:first-child{margin-top:0}
/* the checkout opens on the plan the buyer picked; "Change plan" opens the rest */
#ckform:not(.allplans) .ckplan:not(.on),#ckform:not(.allplans) .ckgh{display:none}
.ckplan.more,.ckgh.more{display:none}
#ckform.allplans .ckplan.more{display:flex}
#ckform.allplans .ckgh.more{display:block}
.ckmore{margin-top:4px;justify-self:start;background:none;border:0;padding:8px 0;
  font:400 14px/1.4 var(--fb);color:var(--ai);cursor:pointer;
  border-bottom:1px solid currentColor}
.ckmore:hover{color:var(--sumi)}
.ckplan{position:relative;display:flex;align-items:center;gap:14px;width:100%;
  text-align:left;padding:13px 17px;border:var(--line);border-radius:3px;background:#fff;
  font-family:var(--fb);color:var(--sumi);cursor:pointer;transition:border-color .15s}
.ckplan:hover{border-color:var(--sumi45)}
.ckplan.on{border-color:var(--shu);box-shadow:inset 0 0 0 1px var(--shu);background:#FFF7F4}
.ckr{width:17px;height:17px;border-radius:50%;border:1px solid #D6CFBC;flex:none;background:#fff}
.ckplan.on .ckr{border:5px solid var(--shu)}
.ckd,.ckp{display:flex;flex-direction:column;gap:2px}
.ckd{flex:1;min-width:0}
.ckd b,.ckp b{font-weight:500;font-size:15.5px;line-height:1.35}
.ckd em,.ckp em{font-style:normal;font-size:13px;color:var(--sumi45);line-height:1.35}
.ckp{text-align:right;align-items:flex-end}
.ckp b{font-family:var(--fla);font-size:19px}
.ckplan b,.ckp em{font-variant-numeric:lining-nums tabular-nums}
.cktag{position:absolute;top:-9px;left:44px;padding:2px 9px;border-radius:999px;
  background:var(--shu);color:#fff;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase}
.ckinc{list-style:none;margin:22px 0 0;padding:20px 0 0;border-top:var(--line);display:grid;gap:12px}
.ckinc li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;
  line-height:1.6;color:var(--sumi70)}
.ckinc svg{width:19px;height:19px;flex:none;margin-top:2px;color:var(--ai)}
.ckright{position:sticky;top:22px}
.ckcard h2{font-family:var(--fla);font-size:24px;letter-spacing:.04em;margin:0 0 18px}
.ckcard h2.ckh{font-family:var(--fb);font-size:16px;font-weight:500;letter-spacing:.01em;
  margin:26px 0 12px}
.ckcard .note{max-width:none;padding-left:0;border-left:0;margin-top:7px;
  font-size:12.5px;color:var(--sumi45)}
.cksum{background:var(--kinari2);border-radius:3px;padding:16px 18px}
.cksum .r{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  font-size:14.5px;padding:5px 0}
.cksum .r b{font-weight:500;font-variant-numeric:lining-nums tabular-nums}
.cksum .tot{border-top:var(--line);margin-top:10px;padding-top:12px}
.cksum .tot span{font-size:15px}
.cksum .tot b{font-family:var(--fla);font-size:26px;font-weight:400}
.ckcard input[type=email]{width:100%;font:400 15px/1.4 var(--fb);padding:13px 14px;
  border:var(--line);border-radius:2px;background:#fff;color:var(--sumi);outline:none}
.ckcard input[type=email]:focus{border-color:var(--ai)}
.ckcard .note{font-size:12.5px;color:var(--sumi45);margin:7px 0 0}
.paystripe{border:var(--line);border-radius:3px;padding:15px 17px;background:#fff}
.psrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pst{font-size:15px;font-weight:500}
.pslogos{display:flex;gap:6px}
.pslogos img{width:38px;height:25px;border:var(--line);border-radius:3px;
  object-fit:contain;background:#fff}
.psd{margin:9px 0 0;font-size:13px;color:var(--sumi45);line-height:1.55}
.ckcard .btn{width:100%;margin-top:20px}
.psby{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-size:12.5px;color:var(--sumi45)}
.psby img{height:17px;width:auto;opacity:.8}
.ckfine{margin:14px 0 0;font-size:12.5px;line-height:1.6;color:var(--sumi45)}
.ckvat{font-size:12px;color:var(--sumi45);margin:8px 0 0}
.cklegal{font-size:11px;line-height:1.5;color:var(--sumi45);margin:14px 0 10px;text-align:center}
.cktrust{font-size:11px;line-height:1.5;color:var(--sumi45);margin:14px 0 0;text-align:center}
.cktrust a,.fztrust a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line2,#ddd)}
.fztrust{font-size:11.5px;color:var(--sumi45);margin:10px 0 0}
.cklegal a{color:inherit;font-style:italic;text-decoration:none;border:0}
.ckfoot{padding:24px 0 40px;font-size:13px;color:var(--sumi45)}
.ckfoot .wrap{display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}
@media(max-width:980px){
  .ckgrid{grid-template-columns:1fr}
  .ckright{position:static}
  header.ckbar .wrap{grid-template-columns:auto 1fr}
  .ckbar .brand{display:none}
  .ckback span{display:none}
  .ckback:after{content:"Back"}
}
@media(max-width:620px){
  .ckleft,.ckcard{padding:22px 18px}
  .ckmain{padding-top:18px}
  .ckprod img{width:62px;height:62px}
  .ckplan{padding:14px;gap:11px}
  .ckd b,.ckp b{font-size:14.5px}
  .ckp b{font-size:17px}
  .cktag{left:38px}
}