@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/dmsans-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/notosansthai-thai.woff2") format('woff2');unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:400 700;font-display:swap;src:url("fonts/notosansthai-latin.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Homie brand palette 2026-10: Taco Red, Warm Ivory, Soft Sand, Muted Olive, Cocoa Ink (50 ivory / 25 red / 15 sand / 7 olive / 3 cocoa) */
  --red:#CA1E26;
  --red-press:#A8171E;
  --red-deep:#7E1418;
  --red-soft:#F5DDD2;
  --ivory:#FCF7EC;
  --paper:#FFFDF8;
  --card:#FFFFFF;
  --sand:#D6BC9C;
  --sand-soft:#EBDDC8;
  --sand-ink:#8A6A48;
  --olive:#918F64;
  --olive-ink:#5F5E3A;
  --olive-soft:#E4E3D2;
  --cocoa:#5B493D;
  --cocoa-deep:#3B2F27;
  --ink-2:#7A6658;
  --success:#4F7A4B;
  --danger:#B8321C;
  --shadow-lift:0 2px 0 var(--sand-soft);
  --shadow-pop:0 18px 40px -10px rgba(59,47,39,.25);
  --shadow-button:0 8px 20px -8px rgba(202,30,38,.45);
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --radius-icon:22%;
  --font:'DM Sans','Noto Sans Thai',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(16px,4vw,40px);
  --max:1240px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;scrollbar-color:var(--red) var(--sand-soft)}
body{margin:0;background:var(--ivory);color:var(--cocoa);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
::selection{background:var(--red);color:var(--card)}
img{display:block;max-width:100%;height:auto}
a{color:var(--red);text-underline-offset:4px;text-decoration-thickness:1.5px}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:8px}
h1,h2,h3{margin:0;text-wrap:balance;font-weight:700}
p{margin:0;text-wrap:pretty}
/* Thai has no spaces between words: once phrase breaks are marked (see script), lines may only break there */
.ph{white-space:nowrap}
.loose .ph{white-space:normal}
.lede,.sub,.founding-note,.answer p,.plate p,.tab>span,.price-foot,.fine,.faq summary,.perk,.pfor,.story p,.note-sample,.demo-caption,.join-card>p,.cta-card p{text-wrap:balance}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons: every button is a capsule, at least 44px tall */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 24px;border-radius:999px;font:600 16px/1.5 var(--font);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .2s}
.btn-red{background:var(--red);color:var(--card);box-shadow:var(--shadow-button)}
.btn-red:hover,.btn-red:active{background:var(--red-press)}
.btn-red:hover{transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--red);border-color:var(--red)}
.btn-line:hover{background:var(--red-soft);transform:translateY(-2px)}
.btn-success{background:var(--success);color:var(--card)}
.btn-success:hover{transform:translateY(-2px)}
.btn-sm{padding:8px 18px;font-size:14px}
.btn:active{transform:translateY(0)}
.todo-link{position:relative}

/* nav */
.top{position:sticky;top:0;z-index:50;background:rgba(248,238,219,.92);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--sand);opacity:0;transition:opacity .3s}
.top.scrolled::after{opacity:1}
nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--red);font-weight:700;font-size:24px;letter-spacing:-.01em}
.brand img{width:40px;height:40px;border-radius:var(--radius-icon)}
.nav-links{display:flex;align-items:center;gap:4px 24px}
.nav-links a:not(.btn){color:var(--cocoa);text-decoration:none;font-weight:500;font-size:16px;padding:12px 0;background:linear-gradient(var(--red),var(--red)) 0 88%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.nav-links a:not(.btn):hover{background-size:100% 2px}
.nav-links a[aria-current="page"]{color:var(--red);font-weight:600;background-size:100% 2px}
nav.wrap{display:flex;align-items:center;gap:16px 28px}
nav.wrap .nav-links{margin-left:auto}

/* flat household elements: visible by default, popped in when JS runs */
.paint path[stroke]{stroke-dasharray:1;stroke-dashoffset:0}
.js .paint path[stroke]{stroke-dashoffset:1;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1)}
.js .paint.in path[stroke]{stroke-dashoffset:0}
.js .paint .blob{transform:scale(.3) rotate(-12deg);opacity:0;transform-origin:50% 90%;transform-box:fill-box;transition:transform 1.1s var(--ease),opacity .5s}
.js .paint.in .blob{transform:none;opacity:1}
.paint.in path[stroke]:nth-of-type(2){transition-delay:.12s}.paint.in path[stroke]:nth-of-type(3){transition-delay:.22s}.paint.in path[stroke]:nth-of-type(4){transition-delay:.3s}.paint.in path[stroke]:nth-of-type(5){transition-delay:.38s}.paint.in path[stroke]:nth-of-type(6){transition-delay:.46s}.paint.in path[stroke]:nth-of-type(7){transition-delay:.54s}.paint.in path[stroke]:nth-of-type(8){transition-delay:.62s}
/* raster elements from the element sheet pop in instead of painting on */
.js img.paint{opacity:0;transform:scale(.85);transition:opacity .5s,transform .9s var(--spring)}
.js img.paint.in{opacity:1;transform:none}
.sway{animation:sway 7s ease-in-out infinite alternate;transform-origin:50% 100%}
@keyframes sway{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
.paint.in .blob:nth-child(2){transition-delay:.06s}.paint.in .blob:nth-child(3){transition-delay:.12s}.paint.in .blob:nth-child(4){transition-delay:.18s}.paint.in .blob:nth-child(5){transition-delay:.24s}.paint.in .blob:nth-child(n+6){transition-delay:.3s}

/* a soft sand underline beneath one heading word */
.brushed{position:relative;white-space:nowrap;display:inline-block}
.brushed svg{position:absolute;left:-4%;bottom:-.12em;width:108%;height:.36em;overflow:visible;z-index:-1}

/* ---------- home hero: the waitlist signup is the hero ---------- */
.hero{position:relative;overflow:hidden;padding-top:clamp(24px,4vw,44px)}
.hero h1{font-size:clamp(36px,4.4vw,56px);line-height:1.35;letter-spacing:-.5px;color:var(--red)}
.hero h1 .l2{display:block;color:var(--cocoa-deep)}
.hero-grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:40px;margin-top:clamp(20px,3vw,36px)}
.hero-copy{display:flex;flex-direction:column;gap:24px;padding-bottom:clamp(48px,7vw,96px)}
.lede{font-size:18px;line-height:1.65;color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.platforms{font-size:14px;color:var(--ink-2)}
.stage{position:relative;min-height:520px}
.stage .el{position:absolute;pointer-events:none}
.stage .el-blob-a{right:150px;top:150px;width:300px;color:var(--sand-soft)}
.stage .el-plant{right:330px;bottom:-12px;width:190px}
.stage .el-arch{right:470px;top:60px;width:96px;color:var(--red)}
.stage .el-cal{right:0;bottom:56px;width:104px}
.stage .el-dots{right:520px;bottom:180px;width:70px}
.founding-note{display:flex;gap:8px;align-items:flex-start;font-size:16px;line-height:1.5;color:var(--red-deep);font-weight:600}
.founding-note svg{flex:none;margin-top:2px}
.phone{background:var(--cocoa-deep);border-radius:44px;padding:12px;box-shadow:0 32px 64px -24px rgba(59,47,39,.5)}
.phone img{width:100%;aspect-ratio:390/844;object-fit:cover;border-radius:32px;background:var(--sand-soft)}
.hero-phone{position:absolute;right:72px;top:40px;width:280px;transform:rotate(6deg)}
.hero-mee{position:absolute;right:-36px;top:-92px;width:172px;transform:rotate(8deg);transform-origin:40% 90%;filter:drop-shadow(0 10px 10px rgba(59,47,39,.14))}
.js .hero h1,.js .hero h1 .l2,.js .hero-copy{animation:rise 1s var(--ease) both}
.js .hero h1 .l2{animation-delay:.14s}
.js .hero-copy{animation-delay:.3s}
.js .hero-phone{animation:settle 1.2s .45s var(--ease) both}
.js .hero-mee{animation:perch .9s 1.35s var(--spring) both,wave 1.8s 2.3s ease-in-out 2}
/* corner perch: the body covers the phone's top-right corner, one arm hooks over the top edge (30% down) and one over the right edge (57% across) */
.hero-mee.perch{width:180px;right:-45px;top:-40px;transform:none;filter:drop-shadow(0 8px 8px rgba(59,47,39,.14))}
.js .hero-mee.perch{animation:perch-in .9s 1.35s var(--spring) both}
@keyframes perch-in{from{opacity:0;transform:translate(-30px,40px) scale(.7)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(36px)}to{opacity:1;transform:none}}
@keyframes settle{from{opacity:0;transform:translateY(140px) rotate(16deg)}to{opacity:1;transform:rotate(6deg)}}
@keyframes perch{from{opacity:0;transform:translateY(60px) rotate(30deg) scale(.6)}to{opacity:1;transform:rotate(8deg)}}
@keyframes wave{0%,100%{transform:rotate(8deg)}30%{transform:rotate(1deg)}60%{transform:rotate(13deg)}}

/* ---------- section scaffolding ---------- */
.section{padding:clamp(80px,10vw,136px) 0 0}
.page-top{padding-top:clamp(48px,6vw,88px)}
/* about: story block sits 10% closer to its neighbours */
.section[aria-labelledby="story-title"],.section[aria-labelledby="story-title"]+.section{padding-top:clamp(72px,9vw,122px)}
.head{display:flex;flex-direction:column;gap:12px;max-width:720px;margin-bottom:clamp(36px,5vw,56px)}
.head.center{margin-left:auto;margin-right:auto;text-align:center;align-items:center}
.h2{font-size:clamp(28px,2.8vw,36px);line-height:1.4;position:relative;z-index:0}
.sub{font-size:18px;line-height:1.65;color:var(--ink-2)}

/* ---------- scenes: three plates, then the before/after illustration ---------- */
.plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,40px);justify-items:center}
.plate{position:relative;width:100%;max-width:380px;aspect-ratio:1;border-radius:50%;background:var(--paper);border:4px solid var(--red);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:56px 48px;text-align:center;box-shadow:0 18px 40px -24px rgba(59,47,39,.35)}
.plate .tag{font-size:clamp(18px,1.6vw,22px);font-weight:700;padding:8px 20px;border-radius:999px;line-height:1.4}
.plate p{font-size:16px;line-height:1.6;color:var(--cocoa)}
.plate:nth-child(1) .tag{background:var(--red-soft);color:var(--red-deep)}
.plate:nth-child(2) .tag{background:var(--sand-soft);color:var(--cocoa-deep)}
.plate:nth-child(3) .tag{background:var(--olive-soft);color:var(--olive-ink)}
.plate .el{position:absolute;width:84px;top:-18px;right:16%}
.answer{margin-top:clamp(40px,5vw,64px);display:flex;align-items:center;gap:clamp(16px,3vw,36px);max-width:900px;margin-left:auto;margin-right:auto}
.answer .scene{width:clamp(260px,40vw,420px);flex:none}
.answer p{font-weight:700;font-size:24px;line-height:1.45;color:var(--cocoa-deep)}
.answer p em{font-style:normal;color:var(--red)}

/* ---------- the app, in a brand-red band: a phone you can tap ---------- */
.band{position:relative;overflow:hidden;background:var(--red);color:var(--card);margin-top:clamp(80px,10vw,136px)}
.band .inner{position:relative;padding-top:clamp(64px,8vw,104px);padding-bottom:clamp(64px,8vw,104px)}
.band .h2{color:var(--card)}
.band .sub{color:var(--ivory)}
.demo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:clamp(32px,6vw,96px);align-items:center}
.demo .head{margin-bottom:28px}
.tabs{display:flex;flex-direction:column;gap:4px;max-width:540px}
.tab{position:relative;display:grid;grid-template-columns:16px 1fr;gap:4px 16px;align-items:baseline;text-align:left;font:inherit;color:var(--ivory);background:transparent;border:0;border-radius:var(--radius-md);padding:16px 20px;cursor:pointer;overflow:hidden;transition:background-color .3s,color .3s}
.tab::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--hue);box-shadow:0 0 0 2px rgba(255,255,255,.6);transform:translateY(1px)}
.tab b{font-size:18px;color:var(--card);font-weight:600}
.tab>span{grid-column:2;font-size:16px;line-height:1.5;display:none}
.tab[aria-selected="true"]>span{display:block}
.tab:hover{background:rgba(255,255,255,.08)}
.tab[aria-selected="true"]{background:var(--paper);color:var(--ink-2)}
.tab[aria-selected="true"] b{color:var(--cocoa-deep)}
.tab .bar{position:absolute;left:20px;right:20px;bottom:8px;height:3px;border-radius:3px;background:var(--hue);transform-origin:left;transform:scaleX(0);grid-column:auto}
.autoplay .tab[aria-selected="true"] .bar{animation:fill var(--dwell,5s) linear forwards}
@keyframes fill{to{transform:scaleX(1)}}
.note-sample{margin-top:24px;font-size:14px;color:var(--ivory);max-width:520px}
.demo-stage{position:relative;justify-self:center;width:min(100%,332px)}
.demo-phone{position:relative;background:var(--cocoa-deep);border-radius:44px;padding:12px;box-shadow:0 40px 72px -32px rgba(59,47,39,.75)}
.screens{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:390/844;background:var(--sand-soft)}
.screens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.screens img.on{opacity:1;transform:none}
.tabbar{position:absolute;left:0;right:0;top:92.2%;height:7.2%;display:grid;grid-template-columns:repeat(7,1fr)}
.tabbar button{border:0;background:transparent;cursor:pointer;border-radius:12px;padding:0}
.tabbar button:hover{background:rgba(202,30,38,.10)}
.tabbar span{display:block}
.tap-hint{position:absolute;left:-112px;bottom:14%;display:flex;align-items:flex-end;pointer-events:none}
.tap-hint img{width:96px;transform:scaleX(-1)}
.tap-hint p{position:absolute;left:-4px;bottom:96px;width:132px;background:var(--paper);color:var(--cocoa);font-size:14px;font-weight:600;line-height:1.45;padding:12px;border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 4px;box-shadow:var(--shadow-pop)}
.demo-caption{display:none}
.band-cta{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.band-cta .btn{background:var(--ivory);color:var(--red);box-shadow:none}
.band-cta .btn:hover{transform:translateY(-2px)}
.band-cta .btn-text{color:var(--card);font-weight:600;font-size:16px;text-underline-offset:5px}
.band-cta .btn-text:hover{color:var(--ivory)}

/* ---------- LINE ---------- */
.line-sec{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.line-copy{display:flex;flex-direction:column;gap:16px}
.line-copy .h2 em{font-style:normal;color:var(--olive-ink)}
.chat{position:relative;background:var(--olive-ink);border-radius:var(--radius-lg);padding:clamp(28px,4vw,48px);padding-top:clamp(72px,8vw,96px);color:var(--card);overflow:visible}
.chat .mee{position:absolute;left:clamp(16px,3vw,40px);top:-96px;width:156px}
.chat-head{position:absolute;top:24px;right:28px;font-size:14px;font-weight:600;color:var(--ivory)}
.bubble{background:var(--paper);color:var(--cocoa);border-radius:var(--radius-md) var(--radius-md) var(--radius-md) 6px;padding:20px 24px;box-shadow:0 18px 32px -20px rgba(59,47,39,.55);font-size:16px;line-height:1.6}
.bubble .from{display:block;font-size:12px;font-weight:500;color:var(--olive-ink);margin-bottom:4px}
.bubble ul{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.bubble li{display:flex;gap:12px;align-items:baseline}
.bubble li i{flex:none;width:10px;height:10px;border-radius:50%;transform:translateY(-1px)}
.time{display:block;margin-top:12px;font-size:12px;font-weight:500;color:var(--ivory)}

/* ---------- story ---------- */
.story{max-width:780px;margin:0 auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px}
.story p{font-size:18px;line-height:1.65;color:var(--ink-2)}
.story .scene{width:min(100%,560px);margin-bottom:8px}

/* ---------- pricing ---------- */
.billing{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;border:2px solid var(--red);background:var(--paper)}
.billing button{font:600 16px var(--font);border:0;background:transparent;color:var(--red);padding:10px 20px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;min-height:44px;transition:background-color .25s,color .25s}
.billing button[aria-pressed="true"]{background:var(--red);color:var(--card)}
.save{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:var(--red-soft);color:var(--red-deep)}
.billing button[aria-pressed="true"] .save{background:var(--paper);color:var(--red)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:stretch;margin-top:clamp(28px,4vw,44px)}
.plan{position:relative;display:flex;flex-direction:column;gap:20px;background:var(--paper);border:3px solid var(--sand-soft);border-radius:var(--radius-md);padding:32px 28px 28px;cursor:pointer;box-shadow:var(--shadow-lift);transition:border-color .25s,transform .35s var(--ease),box-shadow .35s var(--ease);text-align:left;font:inherit;color:inherit}
.plan:hover{border-color:var(--red);transform:translateY(-4px)}
.plan[aria-checked="true"]{border:3px solid var(--red);box-shadow:var(--shadow-pop)}
.plan .badge{position:absolute;top:-16px;left:24px;background:var(--red);color:var(--card);font-size:14px;font-weight:600;padding:4px 14px;border-radius:999px}
.plan .pmee{position:absolute;top:-74px;right:0;width:156px;transition:transform .5s var(--spring)}
.plan[aria-checked="true"] .pmee{transform:translateY(-6px) rotate(-6deg)}
.plan .pname{font-size:24px;line-height:1.45}
.plan .pfor{font-size:14px;color:var(--ink-2)}
.price{display:flex;flex-direction:column;gap:4px;min-height:96px}
.amount{display:flex;align-items:baseline;gap:8px}
.amount b{font-family:'DM Sans',var(--font);font-size:36px;font-weight:700;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--cocoa-deep)}
.amount>span{font-size:16px;color:var(--ink-2)}
.perday{font-size:14px;font-weight:600;color:var(--red)}
.peryear{font-size:14px;color:var(--ink-2)}
.plan ul{list-style:none;margin:0;padding:16px 0 0;border-top:1.5px dashed var(--sand-soft);display:flex;flex-direction:column;gap:12px;font-size:16px;line-height:1.5}
.plan li{display:flex;gap:8px}
.plan li svg{flex:none;margin-top:2px}
.plan li.off{color:var(--ink-2)}
.price-foot{margin-top:24px;font-size:14px;color:var(--ink-2);text-align:center}
.js .swap{transition:opacity .2s,transform .3s var(--ease)}
.swapping .swap{opacity:0;transform:translateY(6px)}

/* ---------- Founding Member (pricing page) ---------- */
.waitlist{background:var(--red);color:var(--card);border-radius:var(--radius-lg);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,56px);align-items:center;position:relative;overflow:hidden}
.waitlist .h2{color:var(--card)}
.waitlist .perk{font-size:18px;font-weight:600;color:var(--card)}
.wl-copy{display:flex;flex-direction:column;gap:20px;position:relative;z-index:1}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:s}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:16px;align-items:start;font-size:16px;line-height:1.6;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:2px solid var(--card);font-weight:700;font-size:16px;font-family:'DM Sans',var(--font)}
.fine{font-size:14px;line-height:1.6;color:var(--ivory)}
.cta-card{position:relative;z-index:1;background:var(--paper);color:var(--cocoa);border-radius:var(--radius-lg);padding:32px 28px;display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;box-shadow:var(--shadow-pop)}
.cta-card img{width:140px;margin-top:-8px}
.cta-card h3{font-size:24px;line-height:1.45}
.cta-card p{font-size:16px;color:var(--ink-2)}
.cta-card .btn{width:100%}
.waitlist .archbg{position:absolute;right:-50px;bottom:-70px;width:360px;color:var(--ivory);opacity:.14;pointer-events:none}

/* ---------- faq ---------- */
.faq{max-width:880px;margin:0 auto}
.faq details{border-top:1.5px solid var(--sand)}
.faq details:last-child{border-bottom:1.5px solid var(--sand)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 0;font-weight:600;font-size:18px;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--red)}
.faq .q{flex:1 1 auto;min-width:0}
.faq .plus{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--red);color:var(--red);display:grid;place-items:center;transition:transform .35s var(--ease),background-color .25s,color .25s}
.faq details[open] .plus{transform:rotate(45deg);background:var(--red);color:var(--card)}
.faq .ans{padding:0 56px 24px 0;font-size:16px;line-height:1.6;color:var(--cocoa)}

/* ---------- close: one solid cocoa card with the celebrating octopus ---------- */
.close{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h m" "s m" "b m";column-gap:32px;row-gap:12px;align-items:start;background:var(--cocoa-deep);border-radius:var(--radius-lg);padding:48px;margin-bottom:clamp(80px,10vw,128px);overflow:visible}
.close .h2{grid-area:h;color:var(--ivory);font-size:clamp(28px,2.8vw,36px)}
.close .h2>span{display:block;color:var(--sand)}
.close .sub{grid-area:s;color:var(--sand-soft);font-size:24px;line-height:1.45;font-weight:400;max-width:560px}
.close .btn{grid-area:b;justify-self:start;margin-top:12px;background:var(--ivory);color:var(--red);box-shadow:0 8px 20px -8px rgba(59,47,39,.35)}
.close .btn:hover{background:var(--paper)}
.close img{grid-area:m;align-self:start;width:208px;margin:-100px 8px 0 0;filter:drop-shadow(0 14px 16px rgba(59,47,39,.22))}

/* ---------- footer ---------- */
footer{background:var(--cocoa-deep);color:var(--sand-soft)}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding-top:40px;padding-bottom:40px}
.foot .fb{display:flex;align-items:center;gap:8px;font-weight:700;font-size:24px;color:var(--ivory)}
.foot .fb img{width:36px;height:36px;border-radius:var(--radius-icon)}
.foot .ft{font-size:14px;color:var(--sand-soft)}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px;padding:0}
.foot nav a{color:var(--ivory);text-decoration:none;font-size:14px;padding:12px 0}
.foot nav a:hover{text-decoration:underline}
.copy{flex:1 1 100%;font-size:14px;color:var(--sand)}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .stage .el-arch,.stage .el-dots{display:none}
}
@media (max-width:900px){
  nav.wrap{flex-wrap:wrap;row-gap:4px}
  nav.wrap .nav-links{order:3;width:100%;margin-left:0;overflow-x:auto;scrollbar-width:none;gap:4px 20px;padding-bottom:4px}
  nav.wrap .nav-links a{white-space:nowrap;font-size:14px}
  nav.wrap>.btn{margin-left:auto}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero-copy{padding-top:8px;padding-bottom:12px}
  .stage{min-height:470px;margin:0 calc(var(--gutter) * -1)}
  .hero-phone{left:50%;right:auto;top:76px;width:248px;margin-left:-112px}
  .hero-mee{width:124px;top:-64px;right:-4px}
  .hero-mee.perch{width:135px;right:-16px;top:-31px}
  .stage .el-plant{right:auto;left:8px;width:140px;bottom:-8px}
  .stage .el-blob-a{right:auto;left:50%;margin-left:-150px;top:120px}
  .stage .el-cal{right:16px;bottom:96px;width:84px}
  .answer .scene{width:100%}
  .plates{grid-template-columns:1fr;gap:24px}
  .plate{max-width:340px}
  .demo{grid-template-columns:1fr}
  .demo .tabs{flex-direction:row;overflow-x:auto;max-width:none;margin:0 calc(var(--gutter) * -1);padding:4px var(--gutter);scrollbar-width:none}
  .demo .tab{flex:none;grid-template-columns:12px auto;padding:12px 16px}
  .demo .tab>span{display:none}
  .demo .tab b{font-size:16px}
  .demo-copy{display:contents}
  .demo .head{order:0}
  .demo .tabs{order:1}
  .demo-stage{order:2;width:min(78%,300px)}
  .note-sample{order:3;margin-top:0;text-align:center;max-width:none}
  .demo-caption{display:block;margin-top:16px;text-align:center;font-size:16px;color:var(--ivory);min-height:3em}
  .tap-hint{left:auto;right:-56px;bottom:auto;top:-28px}
  .tap-hint img{width:76px;transform:none}
  .tap-hint p{left:auto;right:56px;bottom:auto;top:-8px;width:120px;border-radius:var(--radius-md) var(--radius-md) 4px var(--radius-md)}
  .line-sec{grid-template-columns:1fr}
  .chat{margin-top:60px}
  .plans{grid-template-columns:1fr;gap:32px;max-width:460px;margin-left:auto;margin-right:auto}
  .waitlist{grid-template-columns:minmax(0,1fr)}
  .faq .ans{padding-right:0}
  .close{grid-template-columns:1fr;grid-template-areas:"h" "s" "b";padding:64px 24px 32px;margin-top:72px}
  .close img{position:absolute;right:12px;top:-92px;width:132px;margin:0}
  .close .sub{font-size:24px}
  .band-cta{order:4}
}
@media (max-width:480px){
  .ctas .btn{flex:1 1 100%}
  .answer{flex-direction:column;text-align:center}
  .plate{padding:48px 40px}
  .billing button{padding:10px 12px;font-size:14px}
  .waitlist{padding:28px 20px}
}
/* element sheet decorations: grow from the sides of a heading or block, never behind text; hidden on narrow screens */
.deco{position:absolute;pointer-events:none;height:auto;z-index:0}
.deco-host{position:relative}
.deco-inline{position:static;width:132px;align-self:flex-start;margin-top:4px}
.story{position:relative}
.deco-story-l{left:-210px;bottom:24px;width:150px}
.deco-story-r{right:-220px;bottom:16px;width:170px}
.deco-head-l{left:-190px;top:8px;width:150px}
.deco-head-r{right:-190px;top:24px;width:150px}
@media (max-width:1260px){.deco-story-l,.deco-story-r{display:none}}
@media (max-width:1100px){.deco-head-l,.deco-head-r{display:none}}
@media (max-width:899px){.deco-inline{width:104px}}

/* story art: wide cutouts replace the single pose on closing cards and sit above the about heading */
.close img.close-art{width:320px;margin:-120px -8px 0 0}
.head-art{width:min(300px,70vw);height:auto;margin:0 auto 4px}
@media (max-width:899px){.close img.close-art{width:220px;top:-118px;right:4px;margin:0}}

/* home: everyone-helps scene closes the page on the ivory ground */
.together{padding-bottom:clamp(80px,10vw,128px)}
.together-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.together-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.together-copy .h2 .l2{display:block;color:var(--red)}
.together .scene img{width:100%;height:auto;display:block}
@media (max-width:899px){.together-grid{grid-template-columns:1fr}}

/* hero on the room illustration: copy and phone sit in two equal columns, both centred on the same line */
.hero{background:#FBF1DE;padding:clamp(56px,6vw,96px) 0 calc(21vw + 32px)}
.hero h1{font-size:clamp(40px,5.2vw,72px);line-height:1.28}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center;margin-top:0;min-height:clamp(560px,46vw,700px)}
.hero-copy{gap:24px;padding-bottom:0;max-width:560px}
.hero .lede{color:var(--cocoa);font-size:clamp(18px,1.4vw,20px)}
.hero .platforms{color:var(--cocoa)}
.stage{min-height:0;display:flex;justify-content:center;align-items:center}
.hero-phone{position:relative;right:auto;top:auto;width:clamp(290px,24vw,350px);transform:rotate(4deg)}
@media (max-width:899px){
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:40px}
  .hero-copy{max-width:none}
  .stage{margin:0;padding:40px 0 8px}
  .hero-phone{left:auto;margin-left:0;top:auto;width:min(68vw,280px)}
}

/* about plates: a 3D octopus perches on each circle instead of a flat icon */
.plate .el.plate-mee{width:150px;top:-74px;right:6%}
@media (max-width:899px){.plate .el.plate-mee{width:124px;top:-60px}}
/* hero headline: room for the second line to stay whole on desktop */
.hero h1{font-size:clamp(40px,4.8vw,68px)}
@media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}.hero-copy{max-width:640px}.hero h1 .l2{white-space:nowrap}}

/* lock the copy to the wall: the room art is anchored to the hero's bottom edge, its table top sits 21% of the width up,
   so the bottom padding keeps every line of copy above it; the phone dips into the floor zone */
.hero-copy{align-self:center}
.hero-phone{margin:-4vw 0 -10vw}
.hero-grid{min-height:0}
.hero-mee.perch{right:-34px;top:-22px}
@media (max-width:899px){
  .hero{padding-bottom:calc(21vw + 16px)}
  .hero-phone{margin:0 0 -18vw}
  .hero-mee.perch{right:-17px;top:-16px}
}

/* hero phone: centred top to bottom in the whole hero (padding included), independent of the copy column */
@media (min-width:900px){
  .hero .wrap{position:relative}
  .hero .stage{position:absolute;right:0;width:44%;top:calc(-1 * clamp(56px,6vw,96px));bottom:calc(-21vw - 32px);padding:0;margin:0}
  .hero-phone{margin:0;width:min(clamp(290px,24vw,350px),calc((100vh - 140px) / 2.25))}
}
.hero-screens{border-radius:32px}
.hero-screens img{border-radius:0}

/* home: start using - store buttons beside a QR card */
.start-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,6vw,96px);align-items:center;max-width:980px}
.start-copy{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.start-sub>.ln{display:block;white-space:nowrap}
@media (max-width:420px){.start-sub>.ln{white-space:normal}}
.stores{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.store{display:inline-flex;align-items:center;gap:10px;min-height:56px;min-width:184px;padding:8px 22px 8px 18px;border-radius:999px;background:var(--cocoa-deep);color:var(--ivory);text-decoration:none;line-height:1.2;transition:transform .2s var(--ease),background .2s}
.store-ico{width:26px;height:26px;flex:none}
.store-txt{display:flex;flex-direction:column;line-height:1.2}
.store-txt span{font-size:12px;font-weight:500;color:var(--sand)}
.store b{font-size:18px;font-weight:700}
.store:hover{background:var(--cocoa);transform:translateY(-2px)}
.store:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.qr-card{position:relative;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:28px 28px 20px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.qr{width:200px;height:200px;padding:14px;background:#fff;border-radius:18px;box-shadow:inset 0 0 0 1px var(--sand-soft)}
.qr svg{width:100%;height:100%;display:block}
.qr-card p{font-size:16px;font-weight:600;color:var(--cocoa-deep)}
.qr-mee{position:absolute;left:-92px;bottom:-12px;width:132px;pointer-events:none}
/* start page: the download block is a full-width card, as prominent as the about page's opening cards */
.start .start-grid{max-width:none;background:var(--paper);border-radius:var(--radius-lg);padding:clamp(40px,5vw,80px) clamp(28px,6vw,96px);box-shadow:0 1px 0 rgba(59,47,39,.04),0 12px 32px -20px rgba(59,47,39,.18);gap:clamp(40px,6vw,120px)}
.start .start-grid{position:relative;z-index:0}
.start #start-title .h-stroke svg{width:clamp(150px,15vw,230px)}
.start .start-copy{gap:20px}
.start #start-title{font-size:clamp(36px,4vw,56px);line-height:1.3}
.start .start-sub{font-size:clamp(18px,1.6vw,22px)}
.start .stores{gap:16px;margin-top:12px}
.start .store-badge img{height:clamp(52px,4.6vw,64px);width:auto}
.start .qr-card{background:var(--ivory);box-shadow:0 18px 40px -20px rgba(59,47,39,.3);padding:32px 32px 24px;margin-right:clamp(0px,2vw,24px)}
.start .qr{width:clamp(200px,18vw,260px);height:clamp(200px,18vw,260px)}
.start .qr-card p{font-size:18px}
.start .qr-mee{left:-120px;width:clamp(120px,12vw,172px)}
@media (max-width:899px){
  .start-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
  .start-copy{align-items:center}
  .stores{justify-content:center}
  .qr-mee,.start .qr-mee{left:-56px;width:100px}
  .start .start-grid{padding:40px 24px}
}

/* corner perch sized from the phone itself so the hands always land on its edges: the image is 55% of the phone's width;
   its left hand (11%, 33% of the image) sits on the top bezel and its front hand (56%, 70%) on the right bezel */
.hero-mee.perch{width:55%;right:calc(6px - 24.2%);top:0;margin-top:calc(6px - 16.7%)}
@media (max-width:899px){.hero-mee.perch{width:48%;right:calc(6px - 21.1%);top:0;margin-top:calc(6px - 14.5%)}}

/* official store badges (supplied artwork, used as-is) */
.store-badge{display:inline-block;line-height:0;border-radius:12px;transition:transform .2s var(--ease)}
.store-badge img{height:56px;width:auto;display:block}
.store-badge:hover{transform:translateY(-2px)}
.store-badge:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* start page: three numbered steps, each a phone screenshot with its words */
.step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.step{display:flex;flex-direction:column;gap:20px}
.step-shot{background:var(--sand-soft);border-radius:var(--radius-lg);padding:28px 0 0;display:flex;justify-content:center;overflow:hidden;height:clamp(340px,30vw,420px)}
.step-shot .phone{width:min(76%,240px);border-radius:36px 36px 0 0;padding:10px 10px 0;box-shadow:0 18px 40px -16px rgba(59,47,39,.45)}
.step-shot .phone img{border-radius:28px 28px 0 0;object-position:top}
.step-copy{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:var(--red);color:var(--card);font-weight:700;font-size:18px}
.step-copy h3{font-size:24px;line-height:1.45;color:var(--cocoa-deep)}
.step-copy p{font-size:16px;line-height:1.6;color:var(--ink-2)}
.sample-note-light{margin-top:28px;text-align:right;font-size:14px;color:var(--ink-2)}
.how-steps{padding-bottom:clamp(80px,10vw,128px)}
@media (max-width:899px){.step-list{grid-template-columns:1fr;max-width:460px;margin:0 auto}.sample-note-light{text-align:center}}

/* hero headline is supplied artwork (app icon + two lines); the h1 keeps the words as alt text */
.hero h1.hero-headline{font-size:0;line-height:0;margin:0}
.hero-headline img{display:block;width:100%;max-width:560px;height:auto;margin-left:-6px}
@media (max-width:899px){.hero-headline img{max-width:340px;margin-left:-4px}}

/* hero brand lock-up as live text: app icon + "Homie" (DM Sans 700, red) over the line (Noto Sans Thai 700, cocoa) */
.hero h1.hero-brand{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(10px,1.3vw,18px);font-size:inherit;line-height:normal;letter-spacing:0;color:var(--cocoa-deep)}
.hb-top{display:flex;align-items:center;gap:clamp(14px,1.9vw,28px)}
.hb-icon{width:clamp(84px,10vw,144px);height:auto;border-radius:22%;box-shadow:0 0 0 clamp(3px,.35vw,5px) #fff,0 20px 40px -14px rgba(202,30,38,.32)}
.hb-name{font-family:"DM Sans","Noto Sans Thai",system-ui,sans-serif;font-weight:700;font-size:clamp(72px,9.4vw,136px);line-height:.9;letter-spacing:-.025em;color:var(--red)}
.hb-tag{font-family:"Noto Sans Thai","DM Sans",system-ui,sans-serif;font-weight:700;font-size:clamp(22px,2.8vw,41px);line-height:1.35;letter-spacing:-.01em;color:var(--cocoa-deep)}

/* hero: a narrower frame than the page so the copy and the phone sit closer together, still centred */
@media (min-width:900px){.hero > .wrap{max-width:1120px}.hb-tag{white-space:nowrap}}
@media (min-width:1180px){.hero-grid{grid-template-columns:minmax(0,620px) minmax(0,1fr)}}

/* FAQ grouped by topic: a numbered heading per group, answers may run to several paragraphs */
.faq-group+.faq-group{margin-top:clamp(40px,5vw,56px)}
.faq-cat{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:24px;line-height:1.45;font-weight:700;color:var(--cocoa-deep)}
.faq-cat-no{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--red-soft);color:var(--red-deep);font-size:16px;font-weight:700;flex:none}
.faq .ans p+p{margin-top:12px}
@media (max-width:899px){.faq-cat{font-size:20px}}

/* ---------- hero motion (after the reference clip's first seconds): the room settles in from a slight zoom,
   the phone rises from the lower right and tilts into place, its screen fills, the octopus perches,
   an underline draws under the key phrase, doodles draw beside the phone, then a slow push-in ---------- */
.hero{isolation:isolate;background:#FBF1DE}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:url("hero-room.webp") center bottom/100% auto no-repeat;transform-origin:62% 55%}
.js .hero::before{animation:hero-camera 11s cubic-bezier(.3,.1,.3,1) both}
@keyframes hero-camera{0%{transform:scale(1.09)}16%{transform:scale(1)}100%{transform:scale(1.045)}}
@media (max-width:899px){.hero::before{background-position:22% 100%}}
.js .hero-phone{animation:phone-in 1.15s .45s cubic-bezier(.34,1.3,.64,1) both}
@keyframes phone-in{0%{opacity:0;transform:translate(70px,150px) rotate(-3deg) scale(.9)}60%{opacity:1}100%{opacity:1;transform:rotate(4deg)}}
.js .hero-screens img.on:first-child{animation:screen-in .7s 1.35s var(--ease) both}
@keyframes screen-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.js .hero-mee.perch{animation:perch-in .8s 1.55s var(--spring) both}
.hb-hl svg{height:.32em;bottom:-.06em}
.js .hero .hb-hl path{transition-delay:1.7s}
.hero-doodle{position:absolute;left:-58px;top:56px;width:64px;height:64px;overflow:visible;pointer-events:none}
.js .hero-doodle path:nth-of-type(1){transition-delay:1.9s}
.js .hero-doodle path:nth-of-type(2){transition-delay:2.02s}
.js .hero-doodle path:nth-of-type(3){transition-delay:2.14s}
@media (max-width:899px){.hero-doodle{left:-40px;top:40px;width:48px;height:48px}}
/* hero left, v2: two-line tagline sized to the lock-up, lede on two set lines, arrow on the waitlist button */
.hb-tag{display:flex;flex-direction:column;font-size:clamp(36px,5.3vw,76px);line-height:1.18;letter-spacing:-.015em;white-space:nowrap}
.hb-tag .ln{display:block}
.hero .lede{font-size:clamp(18px,1.5vw,22px);line-height:1.6;color:var(--cocoa)}
.hero .lede .ln{display:block}
@media (max-width:520px){.hero .lede .ln{display:inline}}
.btn-arrow{flex:none;transition:transform .25s var(--ease)}
.btn:hover .btn-arrow{transform:translateX(4px)}
@media (min-width:1180px){.hero-grid{grid-template-columns:minmax(0,640px) minmax(0,1fr)}}

/* hero left, v2 proportions (from the owner's mock-up): icon + Homie take ~30% of the width, the tagline's longer line ~1.12x that */
.hb-icon{width:clamp(72px,7.5vw,108px)}
.hb-name{font-size:clamp(60px,7.1vw,102px)}
.hb-top{gap:clamp(12px,1.6vw,22px)}
.hb-tag{font-size:clamp(32px,4vw,58px);line-height:1.2}
@media (min-width:1180px){.hero-grid{grid-template-columns:minmax(0,600px) minmax(0,1fr)}}

/* hero hand holding the phone (chosen 2026-10-25): the hand image is aligned to the phone's
   outer edge by width and bottom, sits above it so the thumb overlaps the frame, and moves with the phone */
.hero-hand{position:absolute;left:-16.86%;bottom:0;width:172.19%;max-width:none;height:auto;margin-bottom:-144.67%;pointer-events:none;z-index:2}
.with-hand .hero-mee.perch{z-index:3}

/* hero hand: shadows so the hand and phone lift off the room (warm cocoa, never black) */
.with-hand .hero-hand{filter:drop-shadow(-6px 18px 34px rgba(59,47,39,.16)) drop-shadow(0 4px 10px rgba(59,47,39,.08))}
/* hand sits behind the phone so the fingers stop at the black frame instead of crossing it */
.with-hand .hero-hand{z-index:1}
.with-hand .hero-phone .phone{position:relative;z-index:2;box-shadow:0 50px 100px -30px rgba(59,47,39,.30),0 18px 44px -18px rgba(59,47,39,.18),0 0 0 1px rgba(59,47,39,.06)}

@media (prefers-reduced-motion:reduce){
  .js .hero::before,.js .hero-phone,.js .hero-screens img.on:first-child,.js .hero-mee.perch{animation:none;opacity:1}
  .js .hero-phone{transform:rotate(4deg)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .paint path[stroke]{stroke-dashoffset:0}
  .js .paint .blob{transform:none;opacity:1}
  .js img.paint{opacity:1;transform:none;transition:none}
}

/* ---------- home features: the shophouse (D1) ---------- */
.hs{background:var(--red);color:var(--card);overflow:hidden;position:relative}
.hs .inner{padding-top:clamp(56px,7vw,96px);padding-bottom:24px}
.hs .sample-note{padding-bottom:clamp(40px,5vw,72px);text-align:right;margin-top:16px}
.hs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,332px);gap:clamp(32px,5vw,80px);align-items:center}
.hs-head{margin-bottom:clamp(28px,4vw,48px)}
.hs-head .h2{color:var(--card)}
.hs-head .sub{color:var(--ivory);margin-top:12px;max-width:620px}
.h-phone{position:relative;background:var(--cocoa-deep);border-radius:44px;padding:12px;box-shadow:0 40px 72px -32px rgba(59,47,39,.75)}
.h-phone .screens{position:relative;border-radius:32px;overflow:hidden;aspect-ratio:390/844;background:var(--sand-soft)}
.h-phone img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .6s var(--ease)}
.h-phone img.on{opacity:1;transform:none}
.sample-note{margin-top:16px;font-size:14px;color:var(--ivory);text-align:center}
.house{position:relative;width:100%;margin:32px auto 0}
.room-pop{position:relative;z-index:4;width:min(100%,400px);margin:0 auto 16px;background:var(--paper);color:var(--ink-2);border-radius:var(--radius-md);padding:16px 20px 20px;display:grid;grid-template-columns:12px 1fr;gap:4px 12px;align-items:baseline;box-shadow:var(--shadow-pop)}
.room-pop::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--dot,var(--red));transform:translateY(1px)}
.room-pop::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;background:var(--paper);border-radius:3px;transform:rotate(45deg)}
.room-pop b{font-size:18px;line-height:1.45;font-weight:600;color:var(--cocoa-deep)}
.room-pop span{grid-column:2;font-size:16px;line-height:1.5;min-height:3em}
.room-pop .bar{position:absolute;left:20px;right:20px;bottom:8px;height:3px;border-radius:3px;background:var(--dot,var(--red));transform-origin:left;transform:scaleX(0)}
.autoplay .room-pop .bar{animation:fill 5s linear forwards}
.room-pop.pop{animation:pop .45s var(--spring)}
@keyframes pop{from{opacity:.4;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.room{position:relative;font:inherit;border:0;padding:0;cursor:pointer;overflow:hidden;background:var(--sand-soft);text-align:left;transition:box-shadow .3s}
/* only the room the octopus is in gets full colour; the rest fade back */
.room .art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .6s ease,opacity .6s ease;filter:grayscale(.9) brightness(1.06) contrast(.85);opacity:.7}
.room:hover .art{filter:grayscale(.45) brightness(1.03) contrast(.92);opacity:.88}
.room[aria-selected="true"] .art{filter:saturate(1.45) contrast(1.05);opacity:1}
.room .name{transition:opacity .4s}
.room[aria-selected="false"] .name{opacity:.75}
.room .name{position:absolute;left:6px;top:6px;z-index:2;display:flex;align-items:center;gap:4px;background:var(--paper);color:var(--hi);font-weight:600;font-size:12px;line-height:1.4;padding:2px 8px 2px 6px;border-radius:999px;box-shadow:var(--shadow-lift);white-space:nowrap}
/* one octopus lives in the house and walks to whichever room you open */
.cat{position:absolute;left:0;top:0;z-index:5;width:72px;pointer-events:none;filter:drop-shadow(0 6px 6px rgba(59,47,39,.28));transition:transform .8s cubic-bezier(.5,-0.3,.4,1.3),width .4s}
.cat.hop{animation:hop .8s ease-in-out}
@keyframes hop{40%{margin-top:-18px}}
@media (min-width:1101px){.room .name{font-size:14px;padding:4px 10px 4px 8px;left:8px;top:8px}}
@media (max-width:900px){.hs-grid{grid-template-columns:1fr}.phone-col{width:min(80%,332px);margin:0 auto}}

/* gabled cutaway house: cream walls and slabs, rooms open to the front */
.hs .inner{position:relative;z-index:1}
.hs-wave{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hs-wave path{fill:var(--ivory)}
/* bottom strip is always under the wave, so paint it ivory to stop a red hairline at the section edge */
@media (min-width:901px){.d1page{background:linear-gradient(var(--red) 0 86%,var(--ivory) 86%)}}
.d1page .hs-grid{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center}
.d1page .hs-head .h2{font-size:clamp(28px,4.6vw,64px);line-height:1.3;white-space:nowrap}
.d1page .hs-head .sub{font-size:clamp(18px,1.6vw,22px)}
.d1page .house{max-width:600px;margin:0}
.shop{position:relative;width:100%;filter:drop-shadow(0 18px 24px rgba(59,47,39,.16))}
.shop .roof{position:relative;height:clamp(56px,6vw,84px);margin-bottom:-2px}
.shop .roof svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.shop .roof .attic{fill:var(--sand-soft)}
.shop .roof .eave{fill:none;stroke:var(--ivory);stroke-width:12px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.shop .face{margin:0 6%;background:var(--ivory);padding:8px;display:flex;flex-direction:column;gap:8px}
.shop .storey{display:grid;gap:8px;height:clamp(112px,11vw,150px)}
.shop .s3{grid-template-columns:1fr 1fr}
.shop .s2{grid-template-columns:3fr 2fr}
.shop .s1{grid-template-columns:3fr 2fr;height:clamp(124px,12vw,164px)}
.shop .room{border-radius:4px;height:100%}
.shop .room[aria-selected="true"]{box-shadow:inset 0 0 0 3px var(--dot)}
.shop .room .name{color:var(--cocoa-deep);background:var(--card);box-shadow:0 4px 10px -4px rgba(59,47,39,.35)}
.shop .room .name svg{color:var(--red)}
@media (min-width:1101px){.shop .room .name{font-size:16px;gap:6px;padding:6px 16px 6px 12px;left:12px;top:12px}.shop .room .name svg{width:18px;height:18px}}
.house .floor{height:10px;margin:0 -6% 0 -14%;background:var(--sand);border-radius:999px}
@media (min-width:901px){
  .d1page .inner{padding-bottom:clamp(56px,6vw,88px)}
}
@media (max-width:900px){
  .hs-wave,.br-d{display:none}
  .d1page .hs-grid{grid-template-columns:1fr}
  .d1page .house{margin:0 auto}
  .house .floor{margin:0 -4%}
}
.hs .band-cta{margin-top:8px}

/* ---------- scene illustrations: warm flat interiors with น้องหมึก ---------- */
.scene{display:block;border-radius:var(--radius-lg);background:var(--paper);box-shadow:var(--shadow-pop);overflow:hidden}
.scene img{width:100%;height:auto;aspect-ratio:762/506;object-fit:cover}
.faq-head{position:relative}
.faq-mee{width:120px;margin:0 auto -8px}

/* about: "บ้านไหนเคยเป็นแบบนี้บ้าง" as three cards, each with the client's 3D scene on a sand dome */
.kinds-title .hl{color:var(--red)}
.kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.kind{background:var(--paper);border-radius:var(--radius-lg);padding:clamp(24px,3vw,40px) clamp(20px,2.4vw,32px) clamp(28px,3vw,40px);text-align:center;box-shadow:0 1px 0 rgba(59,47,39,.04),0 12px 32px -20px rgba(59,47,39,.18)}
.kind-art{position:relative;height:clamp(180px,17vw,230px);display:flex;align-items:flex-end;justify-content:center;margin-bottom:clamp(20px,2vw,28px)}
.kind-art::before{content:"";position:absolute;left:9%;right:9%;top:2%;bottom:-22%;border-radius:50%;clip-path:inset(0 0 18% 0);background:var(--sand-soft);opacity:.55}
.kind-art img{position:relative;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.kind-name{font-size:clamp(20px,1.9vw,26px);font-weight:700;line-height:1.35;color:var(--cocoa-deep);margin:0 0 12px}
.kind p{font-size:clamp(15px,1.25vw,17px);line-height:1.65;color:var(--ink-2);margin:0 auto;max-width:30ch;text-wrap:balance}
@media (max-width:899px){.kinds{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* every section heading ends with the same hand-painted stroke (the one from the pricing heading), in red */
/* same spacing as the old pricing underline: it tucks under the last line, behind the letters */
.h2{isolation:isolate}
.h-stroke{display:block;line-height:0;position:relative;z-index:-1;margin-top:-.24em}
.h-stroke svg{display:inline-block;width:clamp(110px,11vw,160px);height:.36em;overflow:visible}
/* on red bands the stroke turns ivory so it stays visible */
.hs .h-stroke path,.waitlist .h-stroke path{stroke:var(--ivory)}
/* header: breathing room so the CTA does not touch the bar edges */
nav.wrap{padding-top:12px;padding-bottom:12px}
@media (max-width:899px){nav.wrap{padding-top:10px;padding-bottom:8px}}
@media (max-width:899px){html{scroll-padding-top:124px}}
/* about story: illustration left, text right (stacks on narrow screens) */
@media (min-width:900px){
  .story{max-width:1120px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;text-align:left}
  .story .scene{width:100%;margin:0}
  .story-text p{margin-top:20px}
}
.story-text{display:flex;flex-direction:column}
@media (min-width:900px){.story .deco-story-l,.story .deco-story-r{display:none}}
/* about: one big two-tone statement after the three cards (replaces the before/after picture) */
.statement{margin:clamp(56px,7vw,96px) auto 0;text-align:center;font-weight:700;font-size:clamp(22px,6.2vw,48px);line-height:1.35;color:var(--cocoa-deep);max-width:960px}
.statement .ln{display:block}
.statement .hl{color:var(--red)}
/* red text: the stroke drops below the letters instead of sitting behind them */
.statement .brushed svg{bottom:-.34em;height:.3em;z-index:0}
.statement{isolation:isolate}
/* the app icon rides in front of every "Homie" in running text */
.hw{white-space:nowrap}
.hicon{display:inline-block;width:1.05em;height:1.05em;border-radius:24%;vertical-align:-.16em;margin-right:.22em;box-shadow:0 1px 3px rgba(59,47,39,.18)}
/* about story: same width as the cards above so the picture lines up with their left edge */
@media (min-width:900px){.story{max-width:var(--max)}}
/* keep the inline icon from inheriting section image rules (e.g. .close img) */
.hw img.hicon{position:static;grid-area:auto;align-self:auto;width:1.05em;height:1.05em;margin:0 .22em 0 0;filter:none}
/* about story paragraph: four set lines on wide screens */
@media (min-width:1180px){.story-lines .sl{display:block;white-space:nowrap}.story-lines{text-wrap:wrap}}
/* about story: text sits on a white card */
.story-text{background:var(--paper);border-radius:var(--radius-lg);padding:clamp(28px,3.4vw,48px) clamp(24px,3.4vw,48px);box-shadow:0 1px 0 rgba(59,47,39,.04),0 18px 40px -24px rgba(59,47,39,.22)}

/* about: "ไม่ต้องไล่หาเรื่องบ้านใน LINE" - copy left, a LINE group chat and the real app screen right */
.line2{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.5fr);gap:clamp(32px,4vw,64px);align-items:center}
.line2-copy .h2 .ln{display:block}
.line-green{font-style:normal;color:#06C755}
.line2-copy .sub{margin-top:20px;font-size:clamp(17px,1.4vw,20px);line-height:1.65;color:var(--ink-2)}
.line2-visual{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,.72fr);align-items:center;padding:40px 4% 24px 0}
.lc{position:relative;margin:0;background:#EEEBE3;border-radius:22px;overflow:visible;box-shadow:0 24px 48px -28px rgba(59,47,39,.35)}
.lc-head{display:flex;align-items:center;gap:12px;background:#4E5B45;color:#fff;padding:16px 20px;border-radius:22px 22px 0 0}
.lc-title{display:flex;flex-direction:column;font-weight:700;font-size:17px;line-height:1.25}
.lc-title small{font-weight:400;font-size:12px;opacity:.75}
.lc-badge{position:absolute;right:-18px;top:-22px;width:60px;height:60px;border-radius:16px;background:#06C755;display:grid;place-items:center;box-shadow:0 10px 20px -8px rgba(6,120,60,.5)}
.lc-badge svg{width:34px;height:34px}
.lc-badge b{position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;display:grid;place-items:center;border:2px solid #fff}
.lc-body{display:flex;flex-direction:column;gap:14px;padding:20px 18px 24px}
.lc-row{display:flex;align-items:flex-end;gap:8px}
.lc-av{flex:none;width:36px;height:36px;border-radius:50%;color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center;align-self:flex-start}
.lc-col{display:flex;flex-direction:column;gap:2px;min-width:0}
.lc-name{font-size:12px;color:#6F6A60}
.lc-bubble{margin:0;background:#fff;border-radius:18px;padding:9px 14px;font-size:14px;line-height:1.45;color:#2B2622}
.lc-time{flex:none;font-size:11px;color:#8C877D}
.lc-row.me{justify-content:flex-end}
.lc-row.me .lc-bubble{background:#B8E994}
.line2-arrow{position:relative;z-index:3;width:60px;height:auto;justify-self:center}
.line2-app{position:relative;margin:0;padding:0}
.line2-app::before{content:"";position:absolute;inset:8% -12% -6% -10%;background:var(--red);border-radius:58% 42% 50% 50%/48% 52% 48% 52%;transform:rotate(-8deg);z-index:0}
.line2-shot{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 24px 48px -24px rgba(59,47,39,.45)}
.line2-mee{position:absolute;z-index:2;width:46%;left:8%;top:-21%}
@media (max-width:1099px){.line2{grid-template-columns:1fr}.line2-copy{text-align:center}.line2-copy .h2 .h-stroke{text-align:center}}
@media (max-width:640px){.line2-visual{grid-template-columns:1fr;gap:56px}.line2-arrow{transform:rotate(90deg)}.line2-app{width:min(78%,300px);justify-self:center;margin-top:24px}}
section[aria-labelledby="line-title"]{overflow-x:clip}

/* pricing: what each plan has, the same rows as the app's comparison table */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.cmp-wrap{max-width:860px;margin:0 auto;background:var(--paper);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(59,47,39,.04),0 18px 40px -26px rgba(59,47,39,.25);overflow:hidden}
.cmp{width:100%;border-collapse:collapse;font-size:clamp(14px,1.3vw,17px);color:var(--cocoa-deep)}
.cmp th,.cmp td{padding:clamp(12px,1.4vw,18px) clamp(10px,1.6vw,24px);border-bottom:1px solid #EFE6D8;text-align:center;line-height:1.35}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp thead th{font-weight:700;font-size:clamp(15px,1.5vw,19px);color:var(--ink-2)}
.cmp tbody th{text-align:left;font-weight:500}
.cmp td{font-weight:700}
.cmp thead th:not(:first-child),.cmp td{cursor:pointer;transition:background-color .25s,color .25s}
.cmp th.on,.cmp td.on{background:var(--red-soft);color:var(--red-deep)}
.cmp td:not(.on):hover,.cmp thead th:not(:first-child):not(.on):hover{background:#F8EFE6}
.cmp-yes{width:22px;height:22px;color:var(--olive-ink);vertical-align:middle}
.cmp-no{font-weight:500;color:#B8AA9A}
.cmp td.on .cmp-no{color:#B79A93}
.cmp td.on .cmp-yes{color:var(--red-deep)}
.cmp-pick{all:unset;cursor:pointer;display:block;width:100%;font:inherit;color:inherit;border-radius:8px}
.cmp-pick:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.cmp-note{max-width:860px;margin:20px auto 0;font-size:15px;line-height:1.65;color:var(--ink-2);text-align:center;text-wrap:balance}
@media (max-width:520px){.cmp th,.cmp td{padding:12px 8px}.cmp tbody th{font-size:13px}}
/* waitlist page: room under the Founding Member block before the footer */
#founding.page-top{padding-bottom:clamp(64px,8vw,120px)}
/* LINE card shows the real daily summary text the app sends (lib/brief.js renderBrief) */
.lc-oa{object-fit:cover;border-radius:50%;background:#fff}
.lc-brief{white-space:pre-line;font-size:14px;line-height:1.55;padding:12px 16px;border-top-left-radius:6px}
.lc-link{color:#3B6FD1;text-decoration:underline;text-underline-offset:2px;word-break:break-all}
/* about story: the white card runs in under the picture, as if it is the layer behind it; heading stays on one line */
@media (min-width:900px){
  .story{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0}
  .story .scene{position:relative;z-index:2}
  .story-text{position:relative;z-index:1;margin-left:-72px;padding:clamp(36px,4vw,56px) clamp(28px,3.4vw,52px) clamp(36px,4vw,56px) calc(72px + clamp(28px,3vw,48px));border-radius:0 var(--radius-lg) var(--radius-lg) 0}
  .story-text .h2{white-space:nowrap;font-size:clamp(26px,2.55vw,38px)}
}
/* about story: card is exactly as tall as the picture, and the heading scales with the card so it never wraps */
@media (min-width:900px){
  .story{align-items:stretch}
  .story .scene{align-self:center}
  .story-text{justify-content:center;container-type:inline-size}
  .story-text .h2,.story-text .h2.loose{white-space:nowrap;font-size:clamp(22px,7.2cqi,38px)}
}
@media (min-width:900px){.story-text .h2 .ph{white-space:nowrap}}
/* LINE section: both cards about the same size; the official LINE logo on the chat, the Homie logo on the app */
@media (min-width:641px){.line2-visual{grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)}.line2-app{width:96%;justify-self:center}}
@media (min-width:1100px){.line2{grid-template-columns:minmax(0,.62fr) minmax(0,1.6fr)}}
.lc-badge{background:none;box-shadow:none;width:64px;height:64px;border-radius:16px}
.lc-badge img{width:100%;height:100%;border-radius:16px;display:block;box-shadow:0 10px 20px -8px rgba(6,120,60,.45)}
.line2-logo{position:absolute;z-index:3;left:-18px;top:-22px;width:64px;height:64px;border-radius:16px;box-shadow:0 10px 20px -8px rgba(126,20,24,.45)}
@media (max-width:640px){.line2-app{width:min(84%,320px)}}
.line2-logo{left:auto;right:-18px}
@media (max-width:640px){.lc-badge{right:-4px}.line2-logo{right:-6px}}
@media (min-width:1100px){.line2-lines .sl{display:block}}
/* LINE copy: wider column, heading sized to the column so each line stays whole */
@media (min-width:1100px){
  .line2{grid-template-columns:minmax(0,.92fr) minmax(0,1.6fr)}
  .line2-copy{container-type:inline-size}
  .line2-copy .h2 .ln{white-space:nowrap}
  .line2-copy .h2,.line2-copy .h2.loose{font-size:clamp(24px,7.4cqi,44px)}
  .line2-copy .h2 .ph{white-space:nowrap}
}
/* about cards: illustrations 20% smaller inside the same sand dome */
.kind-art img{max-width:80%;max-height:80%}
.lc-nw{white-space:nowrap}
.lc-brief{font-size:13.5px;padding:12px 14px}
.lc-row:not(.me) .lc-col{flex:1 1 auto}.lc-brief{width:max-content;max-width:100%}
.lc-body{padding-left:14px;padding-right:12px}.lc-brief{font-size:13px}
/* about cards: the sand backdrop is a true circle, cut flat at the bottom of the art box */
.kind-art{overflow:hidden}
.kind-art::before{left:50%;right:auto;top:4%;bottom:auto;height:118%;width:auto;aspect-ratio:1;border-radius:50%;clip-path:none;transform:translateX(-50%)}
.foot .copy{flex:none;margin-top:12px;font-size:13px}
/* footer: copyright sits under the links on the right, so the footer stays short */
.foot-r{display:flex;flex-direction:column;align-items:flex-end;gap:0}
.foot-r .copy{margin-top:0;text-align:right}
@media (max-width:640px){.foot-r{align-items:flex-start}.foot-r .copy{text-align:left;margin-top:8px}}
/* footer: all text ivory, two matching rows on each side (brand | links, tagline | copyright), app icon 10% smaller */
.foot{align-items:flex-start}
.foot .fb{height:40px;margin:0;font-size:24px;line-height:40px;color:var(--ivory)}
.foot .fb img{width:32px;height:32px}
.foot .ft,.foot-r .copy{margin:8px 0 0;font-size:14px;line-height:22px;color:var(--ivory)}
.foot nav{height:40px;align-items:center}
.foot nav a{padding:0;line-height:40px;color:var(--ivory)}
@media (max-width:640px){.foot nav{height:auto}.foot-r .copy{margin-top:8px}}
/* about: LINE copy sits on the same white card as the story above, and both cards share one heading and body size */
:root{--card-h:clamp(22px,2.15vw,31px);--card-p:17px}
.line2-copy{background:var(--paper);border-radius:var(--radius-lg);padding:clamp(28px,3vw,44px) clamp(24px,2.4vw,36px);box-shadow:0 1px 0 rgba(59,47,39,.04),0 18px 40px -24px rgba(59,47,39,.22)}
.line2-copy .sub,.story-lines{font-size:var(--card-p);line-height:1.65}
@media (min-width:900px){.story-text .h2,.story-text .h2.loose{font-size:var(--card-h)}}
@media (min-width:1100px){
  .line2{grid-template-columns:minmax(0,1.05fr) minmax(0,1.5fr);gap:clamp(32px,3vw,48px)}
  .line2-copy .h2,.line2-copy .h2.loose{font-size:var(--card-h)}
}

/* LINE section, round 3: both screens sit in matching phone mockups and play in when the section scrolls into view */
.line2-visual{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);align-items:center;padding:28px 2% 12px}
.mph{position:relative;margin:0;width:100%;max-width:290px;justify-self:center;aspect-ratio:780/1688;border-radius:42px;background:#2E2621;padding:9px;box-shadow:0 34px 60px -30px rgba(59,47,39,.55),inset 0 0 0 2px #4A3F38}
.mph::before{content:"";position:absolute;z-index:4;top:17px;left:50%;width:30%;height:20px;border-radius:12px;background:#2E2621;transform:translateX(-50%)}
.mph-scr{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#FCF7EC}
.mph-shot{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.mph-scr.lc{display:flex;flex-direction:column;background:#EEEBE3;box-shadow:none}
.mph-status{display:flex;justify-content:space-between;align-items:center;padding:14px 22px 6px;font-size:12px;font-weight:700;color:#fff;background:#4E5B45}
.mph-ico{display:flex;gap:3px}.mph-ico i{width:4px;height:8px;border-radius:1px;background:#fff;opacity:.9}
.mph-scr.lc .lc-head{border-radius:0;padding:10px 16px 14px}
.mph-scr.lc .lc-body{flex:1;padding:16px 12px 18px 12px;gap:10px}
.mph-scr.lc .lc-brief{font-size:12.5px;line-height:1.5;padding:10px 12px}
.mph-scr.lc .lc-av{width:30px;height:30px}
.mph-badge{position:absolute;z-index:5;top:-18px;width:58px;height:58px}
.mph-badge img{display:block;width:100%;height:100%;border-radius:15px;box-shadow:0 10px 20px -8px rgba(59,47,39,.45)}
.mph-badge-line{right:-20px}
.mph-badge-line b{position:absolute;right:-8px;top:-8px;width:24px;height:24px;border-radius:50%;background:var(--red);color:#fff;font-size:13px;display:grid;place-items:center;border:2px solid #fff}
.mph-badge-homie{right:-20px}
.mph-app::after{content:"";position:absolute;z-index:-1;inset:10% -18% -6% -16%;background:var(--red);border-radius:58% 42% 50% 50%/48% 52% 48% 52%;transform:rotate(-8deg)}
.mph-app{z-index:0;isolation:auto}
.line2-visual{isolation:isolate}
.lc-typing{display:none;gap:4px;align-self:flex-start;background:#fff;border-radius:16px;padding:10px 12px}
.lc-typing i{width:6px;height:6px;border-radius:50%;background:#B9B2A6;animation:typing 1s infinite}
.lc-typing i:nth-child(2){animation-delay:.15s}.lc-typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-3px);opacity:1}}
/* play-in */
.js .line2-visual .mph{opacity:0;transform:translateY(28px) rotate(-2deg);transition:opacity .7s,transform 1s var(--spring,cubic-bezier(.34,1.56,.64,1))}
.js .line2-visual .mph-app{transform:translateY(28px) rotate(2deg);transition-delay:1.9s}
.js .line2-visual.in .mph{opacity:1;transform:none}
.js .line2-visual .line2-arrow path{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .8s 1.5s ease}
.js .line2-visual.in .line2-arrow path{stroke-dashoffset:0}
.js .line2-visual .lc-brief,.js .line2-visual .lc-time{opacity:0;transform:translateY(8px) scale(.96);transform-origin:top left}
.js .line2-visual .mph-badge-line b{transform:scale(0)}
.js .line2-visual.in .lc-typing{display:flex;animation:typing-show 1.1s .5s both}
@keyframes typing-show{0%{opacity:0;max-height:40px}10%,85%{opacity:1;max-height:40px}100%{opacity:0;max-height:0;padding:0;margin:0}}
.js .line2-visual.in .lc-brief,.js .line2-visual.in .lc-time{animation:bubble-in .5s 1.5s cubic-bezier(.34,1.56,.64,1) both}
@keyframes bubble-in{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.js .line2-visual.in .mph-badge-line b{animation:badge-pop .5s 1.4s cubic-bezier(.34,1.56,.64,1) both,badge-pulse 2.4s 2.5s ease-in-out infinite}
@keyframes badge-pop{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes badge-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.js .line2-visual.in .mph-badge-homie img{animation:badge-pop .6s 2.4s cubic-bezier(.34,1.56,.64,1) both}
@media (prefers-reduced-motion:reduce){.js .line2-visual *,.js .line2-visual .mph{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}.js .line2-visual .lc-typing{display:none!important}}
@media (max-width:640px){.line2-visual{grid-template-columns:1fr;gap:40px}.mph{max-width:260px}.line2-arrow{transform:rotate(90deg)}.mph-badge-line,.mph-badge-homie{right:-10px}}
.story .story-lines{font-size:var(--card-p)}
@media (min-width:900px){.line2-copy .h2,.line2-copy .h2.loose{font-size:var(--card-h)}}
/* arrow fades and slides in rather than drawing (the head path is too short for a dash draw) */
.js .line2-visual .line2-arrow path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
.js .line2-visual .line2-arrow{opacity:0;transform:translateX(-10px);transition:opacity .5s 1.5s,transform .6s 1.5s}
.js .line2-visual.in .line2-arrow{opacity:1;transform:none}
@media (max-width:640px){.js .line2-visual .line2-arrow{transform:rotate(90deg) translateX(-10px)}.js .line2-visual.in .line2-arrow{transform:rotate(90deg)}}
.mph-app::after{inset:14% -14% 6% -12%}
/* footer rows tighter */
.foot .fb{height:32px;line-height:32px}
.foot nav{height:32px}
.foot nav a{line-height:32px}
.foot .ft,.foot-r .copy{margin-top:4px}
@media (max-width:640px){.mph-scr.lc .lc-brief{font-size:11.5px}.mph-scr.lc .lc-body{padding-left:10px;padding-right:8px}}
@media (max-width:640px){.mph-scr.lc .lc-brief{font-size:10.8px}}

/* closing banner on every page: sand card, two-line heading, CTA + read-more, octopus planning on the right */
.cta2{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,3vw,48px);background:#F5EADB;border-radius:clamp(24px,3vw,36px);padding:clamp(32px,4.4vw,64px) clamp(28px,5vw,80px);overflow:hidden}
.cta2-title{margin:0;font-weight:700;font-size:clamp(30px,4vw,56px);line-height:1.22;color:var(--cocoa-deep)}
.cta2-title .ln{display:block}
.cta2-title .hl{color:var(--red)}
.cta2-title .brushed svg{bottom:-.1em}
.cta2-title .hicon{width:1em;height:1em;vertical-align:-.12em;margin-right:.18em}
.cta2-sub{margin:clamp(14px,1.6vw,22px) 0 0;font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:var(--ink-2)}
.cta2-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:clamp(22px,2.4vw,32px)}
.cta2-actions .btn{padding-left:32px;padding-right:28px;box-shadow:0 14px 26px -12px rgba(202,30,38,.55)}
.cta2-actions .btn-line{box-shadow:none;padding-left:28px;padding-right:28px}
.cta2-actions .btn-line .hw{color:inherit}
.cta2-link{color:var(--cocoa-deep);font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px}
.cta2-link:hover{color:var(--red)}
.cta2-art{width:100%;max-width:520px;height:auto;justify-self:end}
@media (max-width:899px){.cta2{grid-template-columns:1fr;text-align:center}.cta2-actions{justify-content:center}.cta2-art{justify-self:center;max-width:360px;order:-1}}
.cta2-title{position:relative;isolation:isolate}
.cta2-link{text-decoration:none;display:inline-flex;align-items:center;gap:0;border-bottom:1.5px solid currentColor;padding-bottom:3px}
/* hero phone: the first slide is Homie's real login screen, shown at once (no entry fade), then the app screens cycle */
.hero-screens{background:#FCF7EC}
.js .hero-screens img.on:first-child{animation:none;opacity:1;transform:none}

/* LINE section, round 4: iPhone duo - LINE behind on the left, Homie in front on the right, overlapping */
.line2-visual{display:flex;justify-content:center;align-items:flex-start;padding:48px 0 40px;grid-template-columns:none}
.line2-visual .line2-arrow{display:none}
.mph{flex:none;width:min(46%,280px);max-width:none;border-radius:46px;background:#15110F;padding:10px;box-shadow:0 0 0 2px #9C948B,0 0 0 4px #CFC8BF,0 40px 70px -30px rgba(59,47,39,.6)}
.mph::before{top:20px;width:31%;height:24px;border-radius:14px;background:#000}
.mph::after{content:"";position:absolute;left:-6px;top:22%;width:4px;height:12%;border-radius:2px;background:#B7AFA6;box-shadow:0 -60px 0 -0px #B7AFA6}
.mph-scr{border-radius:37px}
.mph-line{rotate:-6deg;translate:14% 0;z-index:1}
.mph-app{rotate:5deg;translate:-14% 48px;z-index:2}
.mph-app::after{left:auto;right:-6px;top:26%;height:16%;width:4px;inset:auto;position:absolute;background:#B7AFA6;border-radius:2px;transform:none;box-shadow:none}
.line2-visual::before{content:"";position:absolute;z-index:0;width:min(78%,520px);aspect-ratio:1;border-radius:50%;background:var(--red);opacity:.92;right:2%;top:50%;translate:0 -46%}
.mph-badge-line{left:auto;right:-22px}
.mph-badge-homie{right:-22px}
.mph-status{padding-top:16px}
@media (max-width:640px){.line2-visual{padding:36px 0 56px}.mph{width:min(52%,210px);border-radius:36px;padding:7px}.mph-scr{border-radius:30px}.mph::before{top:14px;height:18px}.mph-badge-line{right:-10px}.mph-badge-homie{right:-10px}.mph-badge{width:46px;height:46px}.line2-visual::before{width:86%;right:0}}
/* duo: less overlap so the LINE summary stays readable */
.mph-line{translate:7% 0}
.mph-app{translate:-7% 48px}
/* phones: duo becomes a stack (LINE on top) so the chat stays legible */
@media (max-width:640px){
  .line2-visual{flex-direction:column;align-items:center;padding:28px 0 40px}
  .mph{width:min(74%,270px);border-radius:42px;padding:9px}
  .mph-scr{border-radius:34px}
  .mph-line{rotate:-4deg;translate:-6% 0}
  .mph-app{rotate:4deg;translate:6% -40px}
  .mph-scr.lc .lc-brief{font-size:11.5px}
  .line2-visual::before{width:92%;top:auto;bottom:6%;translate:none;right:-10%}
}
.mph-app::after{display:none}
/* features: the phone's bottom edge lines up with the bottom of the house (top of the floor strip) */
@media (min-width:901px){
  .d1page .hs-grid{align-items:end}
  .d1page .phone-col{margin-bottom:10px}
}
/* closing banner: a full-width light sand band instead of a rounded card */
.cta2-sec{background:#F5EADB;padding-top:0}
.cta2{background:none;border-radius:0;padding-left:0;padding-right:0;overflow:visible}
/* no hairline under the header bar */
.top::after{display:none}
/* LINE chat: the time sits under the bubble so the summary has the full row; the first line may wrap rather than overflow */
.lc-nw{white-space:normal}
.mph-scr.lc .lc-row{position:relative}
.mph-scr.lc .lc-row .lc-time{position:absolute;right:4px;bottom:-18px}
.mph-scr.lc .lc-brief{width:auto;max-width:100%}
/* LINE copy card hugs its text: as wide as the heading, body wraps to that width */
@media (min-width:1100px){
  .line2-copy{width:fit-content;max-width:100%;justify-self:center}
  .line2-lines .sl{display:inline}
}
@media (min-width:1100px){.line2-copy{container-type:normal}}
/* duo: room under the phones so the front phone never crosses into the next section */
.line2-visual{padding-bottom:110px}
@media (max-width:640px){.line2-visual{padding-bottom:60px}}
/* LINE copy card runs on under the phones (like the story card under its picture); body wraps freely */
@media (min-width:1100px){
  .line2-copy{width:auto;justify-self:stretch;position:relative;z-index:0;margin-right:calc(-1 * clamp(140px,13vw,200px));padding-right:calc(clamp(140px,13vw,200px) + clamp(24px,2.4vw,36px))}
  .line2-visual{position:relative;z-index:1}
}
.line2-lines .sl{display:inline}
/* LINE card: wider copy column so the heading fits, card runs well under the LINE phone */
@media (min-width:1100px){
  .line2{grid-template-columns:minmax(0,1.15fr) minmax(0,1.45fr)}
  .line2-copy{margin-right:-240px;padding-right:calc(240px + clamp(24px,2.4vw,36px))}
}
/* phone frames match the home-page phone: plain cocoa bezel, no metal ring or side buttons */
.mph{background:var(--cocoa-deep);padding:11px;border-radius:44px;box-shadow:0 40px 70px -30px rgba(59,47,39,.55)}
.mph::after{display:none}
.mph::before{background:#1E1814}
.mph-scr{border-radius:34px}
@media (max-width:640px){.mph{padding:9px;border-radius:40px}.mph-scr{border-radius:32px}}
@media (min-width:1100px){.line2{grid-template-columns:minmax(0,46%) minmax(0,1fr)}}
/* thinner phone bezels everywhere outside the hero, to match how slim the hero phone reads */
.h-phone{padding:9px;border-radius:42px}
.h-phone .screens{border-radius:34px}
.mph{padding:9px;border-radius:42px}
.mph-scr{border-radius:34px}
@media (min-width:1100px){.line2-copy{max-width:none}}
.cta2-title .hl{color:var(--red)}
/* LINE section: narrower copy column + bigger phones, so text and phones sit closer and the pair ends at the same right edge as the story above */
@media (min-width:1100px){
  .line2{grid-template-columns:minmax(0,41%) minmax(0,1fr);gap:0}
  .line2-visual{justify-content:flex-end}
  .mph{width:min(49%,330px)}
  .mph-line{translate:9% 0}
  .mph-app{translate:0 48px}
  .line2-copy{margin-right:-200px;padding-right:calc(200px + clamp(24px,2.4vw,36px))}
}
.cta2-title .brushed svg{height:.2em;bottom:-.2em}
.cta2-sub .ln{display:block}
@media (min-width:1100px){.mph-app{translate:-30px 48px}}
/* banner underline at the same scale as the pricing-heading stroke (height .36em, 108% wide); a touch lower so the red word stays clear */
.cta2-title .brushed svg{left:-4%;width:108%;height:.36em;bottom:-.2em}
/* pricing table: the corner-clinging octopus from the hero holds the table's top-right corner (same proportions as on the phone) */
.cmp-box{position:relative;max-width:860px;margin:0 auto}
.cmp-mee{position:absolute;z-index:2;width:clamp(120px,15vw,180px);right:calc(6px - .44 * clamp(120px,15vw,180px));top:calc(6px - .30 * clamp(120px,15vw,180px));pointer-events:none}
@media (max-width:640px){.cmp-mee{width:110px;right:-30px;top:-34px}}
#compare{overflow-x:clip}
/* pricing table: a small line icon before each row label, and a cross for what a plan doesn't have */
.cmp-row{display:inline-flex;align-items:center;gap:10px}
.cmp-ico{flex:none;width:20px;height:20px;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cmp-x{width:20px;height:20px;color:#C7B8A8;vertical-align:middle}
.cmp td.on .cmp-x{color:#C9A39B}
@media (max-width:520px){.cmp-ico{width:16px;height:16px}.cmp-row{gap:6px}}
@media (max-width:640px){.cmp-mee{width:88px;right:-22px;top:-46px}}
/* closing banner, round 3: a red band (the brand's "most eye-catching" ground) with ivory type; the octopus sits on a big ivory disc, never straight on red */
.cta2-sec{background:var(--red)}
.cta2{grid-template-columns:auto auto;justify-content:center;gap:clamp(32px,5vw,80px)}
.cta2-title{color:var(--ivory)}
.cta2-title .hl{color:#fff}
.cta2-sub{color:rgba(255,246,236,.82)}
.cta2-sub .hicon{box-shadow:none}
.cta2-actions .btn{background:var(--ivory);color:var(--red);box-shadow:0 14px 26px -12px rgba(60,10,12,.45)}
.cta2-actions .btn:hover{background:#fff}
.cta2-art{position:relative;max-width:440px;justify-self:start;padding:6%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#FCF7EC 0 69%,transparent 70%)}
@media (max-width:899px){.cta2{grid-template-columns:1fr}.cta2-art{justify-self:center;max-width:320px}}
.cta2-art{width:min(100%,420px);height:auto;aspect-ratio:1;object-fit:contain;padding:8%}
/* table octopus sits higher so it holds the corner without covering the "House" label */
.cmp-mee{top:calc(-.58 * clamp(120px,15vw,180px));right:calc(-.4 * clamp(120px,15vw,180px))}
@media (max-width:640px){.cmp-mee{width:84px;top:-50px;right:-20px}}
/* FAQ category headings stand apart from the questions: a cocoa bar with ivory text and a red number disc */
.faq-cat{background:var(--cocoa-deep);color:var(--ivory);border-radius:16px;padding:14px 20px;margin:0 0 8px;font-size:clamp(19px,1.7vw,23px)}
.faq-cat-no{background:var(--red);color:#fff}
.faq-group .faq-cat + details{border-top:0}
/* banner art: one clean circle (solid ivory, true 1:1), no gradient edge */
.cta2-art{background:#FCF7EC;border-radius:50%;aspect-ratio:1/1;object-fit:contain;padding:9%;width:min(100%,400px);box-sizing:border-box}
/* FAQ category bars: warm cocoa brown, and no extra space between groups */
.faq-cat{background:var(--cocoa)}
.faq-group+.faq-group{margin-top:12px}
/* banner art: the five task circles float around the octopus */
.cta2-art.orbit{display:grid;place-items:center;padding:9%}
.orbit-frame{position:relative;width:100%;aspect-ratio:900/623}
.orbit-base{display:block;width:100%;height:auto}
.orbit .orb{position:absolute;height:auto;animation:orb-float 3.6s ease-in-out infinite}
.orbit .orb2{animation-delay:-.7s;animation-duration:4.1s}
.orbit .orb3{animation-delay:-1.4s;animation-duration:3.3s}
.orbit .orb4{animation-delay:-2.1s;animation-duration:3.9s}
.orbit .orb5{animation-delay:-2.8s;animation-duration:4.4s}
@keyframes orb-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7%) rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.orbit .orb{animation:none}}
/* pricing: the comparison section sits on a light sand ground so it reads apart from the plan cards above */
#compare{background:#F3E9DA}
#compare{padding-bottom:clamp(64px,8vw,112px)}
/* banner art, round 2: disc 10% smaller with the octopus kept the same size; circles pop out past the disc one by one */
.cta2-art.orbit{width:min(100%,360px);padding:16px;overflow:visible}
@media (max-width:899px){.cta2-art.orbit{width:min(100%,290px);padding:13px}}
.orbit .orb{animation:orb-pop 7.5s cubic-bezier(.34,1.56,.64,1) infinite;transform-origin:50% 50%}
.orbit .orb1{--dx:-38%;--dy:6%;animation-delay:0s}
.orbit .orb2{--dx:-26%;--dy:-30%;animation-delay:1.5s}
.orbit .orb3{--dx:0%;--dy:-38%;animation-delay:3s}
.orbit .orb4{--dx:26%;--dy:-30%;animation-delay:4.5s}
.orbit .orb5{--dx:38%;--dy:6%;animation-delay:6s}
.orbit .orb1,.orbit .orb2,.orbit .orb3,.orbit .orb4,.orbit .orb5{animation-duration:7.5s}
@keyframes orb-pop{
  0%,22%,100%{transform:none}
  6%{transform:translate(var(--dx),var(--dy)) scale(1.35) rotate(-6deg)}
  13%{transform:translate(var(--dx),var(--dy)) scale(1.3) rotate(4deg)}
}
@media (prefers-reduced-motion:reduce){.orbit .orb{animation:none}}
/* pricing: breathing room under the store note before the sand comparison band; less sand under the table */
#pricing{padding-bottom:clamp(56px,6vw,88px)}
#compare{padding-bottom:clamp(40px,4vw,56px)}
/* table octopus: smaller, and placed with the hero's proportions so its hands sit on the table's corner edges */
.cmp-mee{width:112px;right:calc(6px - .44 * 112px);top:calc(6px - .30 * 112px)}
@media (max-width:640px){.cmp-mee{width:76px;right:calc(4px - .44 * 76px);top:calc(4px - .30 * 76px)}}
/* FAQ category bars: light sand with cocoa text */
.faq-cat{background:#EFE3D1;color:var(--cocoa-deep)}
/* short pages (waitlist): footer stays at the bottom of the window */
body{min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
/* pop distance: far enough that each circle clears the disc edge */
.orbit .orb1{--dx:-95%;--dy:15%}
.orbit .orb2{--dx:-70%;--dy:-80%}
.orbit .orb3{--dx:0%;--dy:-95%}
.orbit .orb4{--dx:70%;--dy:-80%}
.orbit .orb5{--dx:95%;--dy:15%}
.cta2-sec{overflow-x:clip}
/* disc another 10% smaller while the art keeps its size: the disc is drawn behind at 90% */
.cta2-art.orbit{background:none;position:relative}
.cta2-art.orbit::before{content:"";position:absolute;inset:5%;border-radius:50%;background:#FCF7EC;z-index:0}
.cta2-art.orbit .orbit-frame{z-index:1}

/* Waitlist page: lock-price cards, Founding Member path, short Q&A */
#founding.page-top{padding-bottom:0}
.wl-sec .head{margin-bottom:clamp(28px,4vw,48px)}
.wl-locks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.4vw,32px);max-width:1120px;margin:0 auto}
.wl-lock{position:relative;background:var(--paper);border:1.5px solid var(--sand-soft);border-radius:var(--radius-lg);padding:clamp(28px,3vw,40px) clamp(22px,2.6vw,36px) clamp(24px,2.6vw,32px);display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);column-gap:clamp(12px,1.6vw,24px);row-gap:6px;align-items:center;box-shadow:0 18px 40px -26px rgba(59,47,39,.3)}
.wl-lockbadge{position:absolute;top:-16px;right:24px;display:inline-flex;align-items:center;gap:8px;background:var(--red);color:var(--card);font-size:16px;font-weight:600;padding:7px 18px 7px 14px;border-radius:999px;box-shadow:0 8px 18px -10px rgba(202,30,38,.6)}
.wl-lockico{width:18px;height:18px}
.wl-lockmee{grid-column:1;grid-row:1/5;align-self:center;width:118%;max-width:280px;height:auto;justify-self:center;margin:-6% -9%;filter:drop-shadow(0 12px 16px rgba(59,47,39,.14))}
.wl-lockhead,.wl-lockprice,.wl-lockvs,.wl-locksave{grid-column:2}
.wl-lockhead h3{font-size:clamp(24px,2.3vw,30px);line-height:1.2;font-family:'DM Sans',var(--font)}
.wl-lockhead p{font-size:16px;color:var(--ink-2);margin-top:4px}
.wl-lockprice{margin-top:10px;display:flex;align-items:baseline;flex-wrap:wrap;column-gap:10px;color:var(--red)}
.wl-lockprice b{font:700 clamp(44px,4.6vw,64px)/1 'DM Sans',var(--font);letter-spacing:-.01em}
.wl-lockprice span{font-size:18px;font-weight:700;color:var(--cocoa)}
.wl-lockvs{font-size:16px;color:var(--ink-2)}
.wl-lockvs s{text-decoration-thickness:1.5px}
.wl-locksave{justify-self:start;margin-top:8px;display:inline-flex;align-items:center;gap:8px;background:var(--olive-soft);color:var(--olive-ink);font-size:15px;font-weight:700;padding:8px 16px 8px 12px;border-radius:999px;white-space:nowrap}
.wl-leaf{width:20px;height:20px;flex:none;color:var(--olive-ink)}
.wl-lockppl{grid-column:1/-1;margin-top:18px;padding-top:16px;border-top:1.5px dashed var(--sand-soft);font-size:15px;color:var(--cocoa)}
.wl-more{text-align:center;margin-top:clamp(40px,5vw,56px)}
.wl-end a:not(.btn){color:var(--red);font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.wl-more .btn{padding-left:28px;padding-right:24px}
.wl-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2.4vw,40px);position:relative;counter-reset:wp}
.wl-path li{position:relative;counter-increment:wp;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
/* icon: soft sand disc with the element art sitting large inside it */
.wl-ico{position:relative;display:grid;place-items:center;width:clamp(150px,13vw,196px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,#F6EBDD 0 62%,rgba(246,235,221,0) 72%)}
.wl-ico img{width:84%;height:84%;object-fit:contain;filter:drop-shadow(0 8px 10px rgba(59,47,39,.12))}
.wl-ico.is-mee img{width:72%;height:72%}
/* dashed arrow from this icon to the next */
.wl-path li:not(:last-child)::after{content:"";position:absolute;top:calc(clamp(150px,13vw,196px)/2);left:calc(50% + clamp(150px,13vw,196px)/2 + 6px);width:calc(100% - clamp(150px,13vw,196px) + clamp(16px,2.4vw,40px) - 20px);border-top:2.5px dashed var(--sand)}
.wl-path li:not(:last-child)::before{content:"";position:absolute;box-sizing:border-box;top:calc(clamp(150px,13vw,196px)/2 - 4.75px);left:calc(150% + clamp(16px,2.4vw,40px) - clamp(150px,13vw,196px)/2 - 28px);width:12px;height:12px;border-top:2.5px solid var(--sand-ink);border-right:2.5px solid var(--sand-ink);transform:rotate(45deg);opacity:.7}
.wl-when{margin-top:6px;display:inline-flex;align-items:center;font-size:16px;font-weight:600;color:var(--red)}
.wl-when::before{content:counter(wp);position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red);color:var(--card);font:700 17px/1 'DM Sans',var(--font);box-shadow:0 6px 12px -6px rgba(202,30,38,.6)}
.wl-when>span{margin-left:-19px;padding:6px 16px 6px 27px;border-radius:0 999px 999px 0;background:var(--red-soft)}
.wl-path h3{font-size:clamp(19px,1.7vw,22px);line-height:1.4;margin-top:4px}
.wl-path li>p:last-child{font-size:15.5px;line-height:1.65;color:var(--ink-2);max-width:26ch;text-wrap:balance}
.wl-qa-sec{padding-bottom:clamp(72px,9vw,120px)}
.wl-qa-sec .faq-head{margin-bottom:clamp(20px,3vw,32px)}
.wl-end{max-width:880px;margin:28px auto 0;display:flex;align-items:center;justify-content:flex-end;gap:16px;flex-wrap:wrap;font-size:16px;color:var(--cocoa);text-align:right}
@media (max-width:1060px){
  .wl-locks{grid-template-columns:1fr;max-width:640px}
}
@media (max-width:900px){
  .wl-path{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px}
  .wl-path li::before,.wl-path li::after{display:none}
}
@media (max-width:640px){
  .wl-locks{grid-template-columns:1fr;row-gap:32px}
  .wl-lock{grid-template-columns:104px minmax(0,1fr);padding:30px 20px 22px}
  .wl-lockmee{grid-row:1/3;align-self:start;width:124%;margin:-14% -12% 0}
  .wl-lockprice,.wl-lockvs,.wl-locksave{grid-column:1/-1}
  .wl-lockprice{margin-top:14px}
  .wl-path{grid-template-columns:1fr;row-gap:28px}
  .wl-path li{display:grid;grid-template-columns:112px 1fr;column-gap:16px;row-gap:4px;text-align:left;align-items:start;justify-items:start}
  .wl-ico{width:112px;grid-row:1/4}
  .wl-when{margin-top:10px;font-size:15px}
  .wl-when::before{width:32px;height:32px;font-size:15px}
  .wl-when>span{margin-left:-16px;padding-left:24px}
}
/* FAQ: no line under the last question of a group; the next category bar sits right where that line was */
.faq-group details:last-of-type{border-bottom:0}
.faq-group+.faq-group{margin-top:0}
/* sound toggle on the banner disc */
.orbit-sound{position:absolute;z-index:3;right:8%;bottom:8%;width:40px;height:40px;border-radius:50%;border:0;background:var(--red);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 14px -6px rgba(60,10,12,.5);transition:transform .2s}
.orbit-sound:hover{transform:scale(1.08)}
.orbit-sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
.orbit-sound svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.orbit-sound svg path:first-child{fill:currentColor}
.orbit-sound .snd-on{display:none}
.sound-on .orbit-sound .snd-on{display:block}
.sound-on .orbit-sound .snd-off{display:none}
/* start page: the octopus stands beside the QR card, never over the code */
.start .qr-mee{left:auto;right:calc(100% - 14px);bottom:-10px;width:clamp(120px,12vw,172px)}
@media (max-width:899px){.qr-mee,.start .qr-mee{right:auto;left:-14px;bottom:-46px;width:86px}.start .qr-card{margin-bottom:40px;padding-bottom:28px}}
@media (max-width:899px){.start .qr-mee{bottom:-70px;left:-22px;width:80px}.start .qr-card{margin-bottom:60px}}
.cta-card img.founding-badge{width:clamp(170px,16vw,210px);margin:-4px 0 4px;filter:drop-shadow(0 10px 16px rgba(59,47,39,.22))}
/* FAQ items as separate white cards with a soft sand border (both FAQ page and waitlist page) */
.faq details,.faq details:last-child,.faq-group details:last-of-type,.faq-group .faq-cat + details{border:1.5px solid #E6D6BF;border-radius:20px;background:var(--paper);margin-bottom:12px;transition:border-color .2s}
.faq details[open],.faq details:hover{border-color:var(--sand)}
.faq summary{padding:20px 22px 20px 26px}
.faq .ans{padding:0 26px 22px}
.faq-cat{margin-bottom:12px}
.faq-group+.faq-group{margin-top:28px}
@media (max-width:640px){.faq summary{padding:16px 16px 16px 18px}.faq .ans{padding:0 18px 18px}}
/* room under the last FAQ card before the closing band */
.faq{padding-bottom:clamp(48px,6vw,88px)}

/* About LINE section: Muek holding a phone perches on the copy card's top-left corner */
.line2-copy{position:relative}
.line2-mee{position:absolute;left:-24px;top:-150px;width:clamp(132px,12vw,168px);height:auto;transform:rotate(-6deg);filter:drop-shadow(0 12px 16px rgba(59,47,39,.2));pointer-events:none;z-index:2}
.line2-copy .h2{position:relative}
@media (max-width:1099px){.line2-copy{margin-top:110px}}
@media (max-width:640px){.line2-mee{left:-6px;top:-110px;width:116px}}
/* the couple art sits smaller inside its canvas than the house art; scale it to read the same size */
.wl-lockmee.is-couple{transform:scale(1.22);transform-origin:50% 60%}
/* both plan images leave empty space above the octopus (art fills the lower ~75% of the canvas); lift them so the art sits mid-card */
.wl-lockmee{translate:0 -11%}
.wl-lockmee.is-couple{translate:0 -14%}
.cta-card p.cta-time{display:inline-flex;align-items:center;gap:6px;margin-top:-6px;padding:4px 12px;border-radius:999px;background:var(--red-soft);color:var(--red-deep);font-size:14px;font-weight:600}
.waitlist .h2{text-wrap:balance}
.wl-br{display:none}
@media (max-width:640px){.wl-br{display:inline}}
/* duo phones a bit shorter */
.mph{aspect-ratio:780/1500}
.wl-qa-sec .faq{padding-bottom:0}
.wl-qa-sec .wl-end{margin-top:20px}
.orbit-sound{display:none}

/* About "who it's for" cards: rise in one after another, mascot pops up then bobs gently; hover lifts the card and gives Muek a wiggle */
.kind{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.kind-art img{transform-origin:50% 90%;animation:kind-bob 4.2s ease-in-out infinite}
.kinds .kind:nth-child(2) .kind-art img{animation-delay:-1.4s}
.kinds .kind:nth-child(3) .kind-art img{animation-delay:-2.8s}
@keyframes kind-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-1.5deg)}}
@keyframes kind-wiggle{0%,100%{transform:translateY(-6px) rotate(0) scale(1.04)}25%{transform:translateY(-8px) rotate(-4deg) scale(1.04)}75%{transform:translateY(-8px) rotate(4deg) scale(1.04)}}
.kind:hover{transform:translateY(-8px);box-shadow:0 1px 0 rgba(59,47,39,.04),0 28px 48px -26px rgba(59,47,39,.35)}
.kind:hover .kind-art img{animation:kind-wiggle .9s ease-in-out infinite}
.js .kind.paint{opacity:0;translate:0 44px;transition:opacity .7s var(--ease),translate .9s var(--ease),transform .45s var(--ease),box-shadow .45s var(--ease)}
.js .kind.paint .kind-art img{scale:.82;translate:0 24px;opacity:0;transition:scale .9s var(--spring),translate .9s var(--spring),opacity .5s;transition-delay:.25s}
.js .kind.paint.in{opacity:1;translate:0 0}
.js .kind.paint.in .kind-art img{scale:1;translate:0 0;opacity:1}
/* side by side they enter together, so stagger them; stacked on phones each one enters as it scrolls in */
@media (min-width:900px){
  .js .kind.paint.in:nth-child(2){transition-delay:.13s,.13s,0s,0s}
  .js .kind.paint.in:nth-child(3){transition-delay:.26s,.26s,0s,0s}
  .js .kind.paint.in:nth-child(2) .kind-art img{transition-delay:.38s}
  .js .kind.paint.in:nth-child(3) .kind-art img{transition-delay:.51s}
}
@media (prefers-reduced-motion:reduce){
  .kind-art img,.kind:hover .kind-art img{animation:none}
  .kind:hover{transform:none}
  .js .kind.paint,.js .kind.paint .kind-art img{opacity:1;translate:none;scale:none;transition:none}
}
/* pricing page: price figures carry the card - large, brand red for the paid plans, unit in solid cocoa */
.plan .amount{gap:10px;margin-top:4px}
.plan .amount b{font-size:clamp(48px,4.6vw,64px);line-height:1;letter-spacing:-.02em;color:var(--red)}
.plan[data-plan="free"] .amount b{color:var(--cocoa-deep)}
.plan .amount>span{font-size:18px;font-weight:700;color:var(--cocoa)}
/* waitlist path: each step hops in turn, its arrow runs, and the number disc pulses */
.wl-path li.hit .wl-ico img{animation:step-hop .7s cubic-bezier(.34,1.56,.64,1)}
.wl-path li.hit .wl-when::before{animation:step-num .7s ease-out}
.wl-path li.hit::after{animation:step-arrow .7s .25s ease-out}
.wl-path li.hit:last-child .wl-ico img{animation:step-jingle .9s ease-in-out}
@keyframes step-hop{0%{transform:none}35%{transform:translateY(-18%) scale(1.08) rotate(-4deg)}65%{transform:translateY(2%) scale(.98)}100%{transform:none}}
@keyframes step-num{0%{box-shadow:0 0 0 0 rgba(202,30,38,.45)}100%{box-shadow:0 0 0 14px rgba(202,30,38,0)}}
@keyframes step-arrow{0%{opacity:.35;transform:translateX(-10px)}60%{opacity:1;transform:translateX(4px)}100%{opacity:1;transform:none}}
@keyframes step-jingle{0%,100%{transform:none}20%{transform:rotate(-12deg) scale(1.06)}40%{transform:rotate(10deg) scale(1.06)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
/* Founding badge: pops and wiggles, with a sweep of light */
.cta-card .founding-badge.shine{animation:badge-wiggle 1s cubic-bezier(.34,1.56,.64,1)}
@keyframes badge-wiggle{0%{transform:none}25%{transform:scale(1.1) rotate(-5deg)}50%{transform:scale(1.04) rotate(4deg)}75%{transform:rotate(-2deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.wl-path li.hit *,.wl-path li.hit::after,.founding-badge.shine{animation:none!important}}
/* waitlist price section: light sand ground; the two octopuses sway and hop, and hop again when their card is hovered */
.wl-locksec{background:#F3E9DA}
.wl-lockmee{transform-origin:50% 90%;animation:mee-sway 3.2s ease-in-out infinite}
.wl-lock+.wl-lock .wl-lockmee{animation-delay:-1.6s}
.wl-lock:hover .wl-lockmee,.wl-lockmee.jump{animation:mee-jump .8s cubic-bezier(.34,1.56,.64,1)}
@keyframes mee-sway{0%,100%{transform:rotate(-4deg) translateY(0)}50%{transform:rotate(4deg) translateY(-4%)}}
@keyframes mee-jump{0%{transform:none}30%{transform:translateY(-18%) scale(1.06,.96) rotate(-6deg)}55%{transform:translateY(2%) scale(.96,1.05)}80%{transform:translateY(-4%) rotate(3deg)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.wl-lockmee,.wl-lockmee.jump{animation:none}}
/* sand price band: even space above the heading and below the button */
.wl-locksec{padding-top:clamp(64px,7vw,104px);padding-bottom:clamp(64px,7vw,104px);margin-top:clamp(32px,4vw,56px)}

/* waitlist hero, round 2 (after the reference): red card, copy with icon steps on the left, the Founding badge on a podium on the right */
.fm{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,4vw,64px);align-items:center;background:var(--red);color:var(--ivory);border-radius:clamp(24px,3vw,36px);padding:clamp(32px,4.5vw,64px);overflow:hidden;isolation:isolate}
.fm::before{content:"";position:absolute;z-index:-1;right:-12%;top:-30%;width:60%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),rgba(255,255,255,0) 70%)}
.fm-copy{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px)}
.fm-eyebrow{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0;padding:7px 16px;border-radius:999px;background:rgba(255,246,236,.16);color:var(--ivory);font:700 14px/1 'DM Sans',var(--font);letter-spacing:.06em}
.fm-eyebrow svg{width:18px;height:18px;color:#FFD27A}
.fm-title{margin:0;font-weight:700;font-size:clamp(30px,3.6vw,50px);line-height:1.25;color:#fff}
.fm-title .ln{display:block}
.fm-accent{color:#FFE7C2}
.fm-title .brushed svg{bottom:-.18em;height:.3em}
.fm-perk{margin:0;font-size:clamp(17px,1.5vw,20px);font-weight:600;color:rgba(255,246,236,.9)}
.fm-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.fm-steps li{display:grid;grid-template-columns:64px 30px 1fr;align-items:center;gap:14px}
.fm-ico{width:64px;height:64px;border-radius:50%;background:var(--ivory);display:grid;place-items:center;box-shadow:0 8px 16px -10px rgba(60,10,12,.6)}
.fm-ico img{width:70%;height:70%;object-fit:contain}
.fm-no{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font:700 15px/1 'DM Sans',var(--font)}
.fm-steps b{display:block;font-size:clamp(16px,1.35vw,18px);line-height:1.45;color:#fff}
.fm-steps .fm-sub{display:block;font-size:15px;line-height:1.5;color:rgba(255,246,236,.82)}
.fm-note{display:flex;gap:12px;align-items:flex-start;margin:4px 0 0;padding:14px 18px;border-radius:16px;background:rgba(255,246,236,.12);font-size:13.5px;line-height:1.65;color:rgba(255,246,236,.9)}
.fm-note svg{flex:none;width:22px;height:22px;color:#FFD27A;margin-top:1px}
.fm-visual{display:flex;flex-direction:column;align-items:center;gap:14px}
.fm-stage{position:relative;width:min(100%,420px);aspect-ratio:1/.92;display:grid;place-items:center}
.fm-stage::before{content:"";position:absolute;inset:4% 6% 14%;border-radius:50%;background:var(--ivory);opacity:.95}
.fm-stage .founding-badge{position:relative;z-index:2;width:72%;height:auto;margin-top:-8%;filter:drop-shadow(0 18px 22px rgba(60,10,12,.35));animation:fm-float 4s ease-in-out infinite}
.fm-podium{position:absolute;z-index:1;left:20%;right:20%;bottom:9%;height:9%;border-radius:50%;background:#A3141B;box-shadow:inset 0 6px 0 rgba(255,255,255,.18)}
.fm-el{position:absolute;z-index:3;width:24%;height:auto;filter:drop-shadow(0 8px 10px rgba(60,10,12,.25))}
.fm-house{left:-2%;bottom:10%}
.fm-cal{right:-2%;bottom:22%;width:20%;transform:rotate(8deg)}
.fm-bubble{position:absolute;z-index:4;right:-4%;top:2%;margin:0;padding:12px 16px;border-radius:22px 22px 22px 6px;background:#fff;color:var(--red);font-weight:700;font-size:clamp(14px,1.25vw,16px);line-height:1.35;transform:rotate(-5deg);box-shadow:0 10px 18px -10px rgba(60,10,12,.5)}
.fm-spark{position:absolute;z-index:3;width:22px;height:22px;background:#FFD27A;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:fm-twinkle 2.4s ease-in-out infinite}
.fm-spark.s1{left:6%;top:16%}.fm-spark.s2{right:14%;top:44%;width:16px;height:16px;animation-delay:-.8s}.fm-spark.s3{left:20%;top:52%;width:14px;height:14px;animation-delay:-1.6s}
.fm-btn{width:min(100%,380px);background:var(--ivory);color:var(--red);font-size:18px;padding:14px 28px;box-shadow:0 14px 26px -12px rgba(60,10,12,.55)}
.fm-btn:hover{background:#fff}
.fm-time{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;font-size:14px;color:rgba(255,246,236,.88);text-align:center}
.fm-time>svg{width:16px;height:16px}
.fm-time .hicon{box-shadow:none}
@keyframes fm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4%)}}
@keyframes fm-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.5}50%{transform:scale(1.15) rotate(20deg);opacity:1}}
.fm-stage .founding-badge.shine{animation:badge-wiggle 1s cubic-bezier(.34,1.56,.64,1)}
@media (max-width:899px){.fm{grid-template-columns:1fr}.fm-visual{order:-1}.fm-stage{width:min(100%,340px)}.fm-steps li{grid-template-columns:52px 26px 1fr;gap:10px}.fm-ico{width:52px;height:52px}.fm-no{width:26px;height:26px;font-size:13px}}
@media (prefers-reduced-motion:reduce){.fm-stage .founding-badge,.fm-spark{animation:none}}
/* steps without the icon tiles: number disc + text */
.fm-steps li{grid-template-columns:34px 1fr}
.fm-no{width:34px;height:34px;font-size:16px}
@media (max-width:899px){.fm-steps li{grid-template-columns:30px 1fr}.fm-no{width:30px;height:30px}}
/* notice box: frosted glass over the red card (blur of the soft glow behind it, light border, top highlight) */
.fm-note{position:relative;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 28px -14px rgba(60,10,12,.55);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.fm::after{content:"";position:absolute;z-index:-1;left:-8%;bottom:-18%;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,200,170,.35),rgba(255,200,170,0) 68%)}
/* title sized to its column so each line stays whole */
.fm-copy{container-type:inline-size}
.fm-title,.fm-title.loose{font-size:clamp(24px,7cqi,50px)}
.fm-title .ln{white-space:nowrap}
.fm-title .ph{white-space:nowrap}
.fm-title,.fm-title.loose{font-size:clamp(19px,7cqi,50px)}
/* calmer glass: no glow blob behind, lighter blur and tint */
.fm::after{display:none}
.fm-note{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);box-shadow:inset 0 1px 0 rgba(255,255,255,.3);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fm-steps{gap:12px}
/* Founding stage, round 2: the client's card-on-podium art, with the crowned octopus peeking over the card */
.fm-stage{aspect-ratio:auto;display:block;width:min(100%,500px);padding-top:38%}
.fm-stage::before{display:none}
.fm-stage .fm-card{position:relative;z-index:2;display:block;width:100%;height:auto;margin:0;filter:drop-shadow(0 18px 22px rgba(60,10,12,.35));animation:none}
.fm-mee{position:absolute;z-index:1;left:30%;top:0;width:46%;height:auto;transform-origin:50% 100%;animation:fm-peek 3.6s ease-in-out infinite;filter:drop-shadow(0 10px 14px rgba(60,10,12,.35))}
@keyframes fm-peek{0%,100%{transform:translateY(6%) rotate(-3deg)}50%{transform:translateY(-2%) rotate(3deg)}}
.fm-bubble{right:-2%;top:0}
.fm-stage .fm-card.shine{animation:badge-wiggle 1s cubic-bezier(.34,1.56,.64,1)}
@media (prefers-reduced-motion:reduce){.fm-mee{animation:none}}
.fm-stage{padding-top:30%}
.fm-mee{left:26%;top:2%;width:44%}
.fm-stage::after{content:"";position:absolute;z-index:0;left:8%;right:8%;top:-4%;aspect-ratio:1;border-radius:50%;background:var(--ivory);opacity:.95}
.fm-bubble{right:-4%;top:-6%;z-index:4}
@media (max-width:899px){.fm-bubble{right:-6%;top:-10%;font-size:13px;padding:9px 12px}.fm-mee{left:22%}}
.fm-copy{gap:clamp(18px,2vw,26px)}.fm-note{margin-top:8px}
.fm-copy .fm-btn{align-self:flex-start;width:auto;min-width:260px;margin-top:4px}
@media (max-width:899px){.fm-copy .fm-btn{align-self:stretch;width:100%}}
/* the ivory disc stops behind the podium instead of showing under it */
.fm-stage::after{clip-path:inset(0 0 17% 0)}
/* big, bold sign-up button above the notice */
.fm-copy .fm-btn{min-width:min(100%,360px);padding:20px 40px;font-size:clamp(19px,1.6vw,22px);font-weight:700;border-radius:999px;margin:6px 0 4px;box-shadow:0 18px 32px -14px rgba(60,10,12,.7),0 0 0 6px rgba(255,246,236,.18);animation:fm-btn-pulse 2.6s ease-in-out infinite}
.fm-copy .fm-btn .btn-arrow{width:24px;height:24px;transition:transform .25s}
.fm-copy .fm-btn:hover .btn-arrow{transform:translateX(4px)}
@keyframes fm-btn-pulse{0%,100%{box-shadow:0 18px 32px -14px rgba(60,10,12,.7),0 0 0 6px rgba(255,246,236,.18)}50%{box-shadow:0 18px 32px -14px rgba(60,10,12,.7),0 0 0 12px rgba(255,246,236,.08)}}
@media (prefers-reduced-motion:reduce){.fm-copy .fm-btn{animation:none}}
.wl-lockprice small{flex-basis:100%;font-size:16px;font-weight:600;color:var(--cocoa);margin-bottom:2px}
.wl-lockvs{text-wrap:balance}
.nw{white-space:nowrap}
/* notice in two set lines; sign-up button larger still */
.fm-note{font-size:14.5px;align-items:center}
@media (min-width:900px){.fm-note .ln{display:block}}
.fm-copy .fm-btn{min-width:min(100%,440px);padding:24px 48px;font-size:clamp(22px,1.9vw,27px)}
.fm-copy .fm-btn .btn-arrow{width:28px;height:28px}
@media (min-width:900px){.hs-head .sub.hs-one{max-width:none;white-space:nowrap;text-wrap:nowrap}}
/* savings pill in LINE green */
.wl-locksave{background:#06C755;color:#fff}
.wl-locksave .wl-leaf{color:#fff;fill:currentColor}

/* start steps: the phone is the backdrop, the key feature pops out over it as floating cards */
.step{position:relative}
.step-shot{position:relative}
.pop{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:10px 14px;box-shadow:0 16px 30px -14px rgba(59,47,39,.45),0 0 0 1px rgba(59,47,39,.05);color:var(--cocoa-deep);max-width:78%}
.pop b{display:block;font-size:14px;line-height:1.3;font-weight:700}
.pop small{display:block;font-size:12px;line-height:1.35;color:var(--ink-2)}
.pop-a{left:-14px;top:22%}
.pop-b{right:-14px;top:52%}
.pop-ico{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--red-soft);color:var(--red)}
.pop-ico.is-red{background:var(--red);color:#fff}
.pop-ico.is-olive{background:var(--olive-soft);color:var(--olive-ink)}
.pop-ico svg{width:20px;height:20px}
.pop-logo{flex:none;width:34px;height:34px;border-radius:10px}
.pop-seg{flex-direction:column;align-items:flex-start;gap:6px}
.seg{display:inline-flex;background:var(--sand-soft);border-radius:999px;padding:3px}
.seg i{font-style:normal;font-size:12px;font-weight:600;padding:4px 12px;border-radius:999px;color:var(--ink-2)}
.seg i.on{background:var(--red);color:#fff}
.pop-code{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px}
.pop-code b{font:700 14px/1.2 'DM Sans',var(--font);letter-spacing:.04em;color:var(--red)}
.pop-btn{margin-top:4px;display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px}
.pop-btn svg{width:14px;height:14px}
.js .step .pop{opacity:0;transform:translateY(14px) scale(.9)}
.js .step.in .pop{animation:pop-in .6s cubic-bezier(.34,1.56,.64,1) both,pop-bob 4s 1s ease-in-out infinite}
.js .step.in .pop-b{animation-delay:.25s,1.4s}
@keyframes pop-in{from{opacity:0;transform:translateY(14px) scale(.9)}to{opacity:1;transform:none}}
@keyframes pop-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){.js .step .pop{opacity:1;transform:none;animation:none!important}}
@media (max-width:899px){.pop-a{left:-6px}.pop-b{right:-6px}}
/* features: the room's standout feature pops out beside the phone */
.phone-col{position:relative}
.hpop{position:absolute;z-index:6;display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:11px 16px 11px 11px;box-shadow:0 18px 34px -14px rgba(59,47,39,.5),0 0 0 1px rgba(59,47,39,.05);color:var(--cocoa-deep);white-space:nowrap;opacity:0;transform:translateY(12px) scale(.88);transition:opacity .25s,transform .25s}
.hpop.show{opacity:1;transform:none;transition:opacity .35s,transform .55s cubic-bezier(.34,1.56,.64,1)}
.hpop b{display:block;font-size:15px;line-height:1.3;font-weight:700}
.hpop small{display:block;font-size:12.5px;line-height:1.35;color:var(--ink-2)}
.hpop .pop-ico svg{width:20px;height:20px}
.hpop-a{left:-72px;top:24%}
.hpop-b{right:-56px;top:58%}
@media (max-width:900px){.hpop-a{left:-18px}.hpop-b{right:-18px}}
.hpop-b{right:-28px}@media (max-width:900px){.hpop-b{right:-10px}.hpop-a{left:-10px}}
/* one card per step, sitting on the bottom edge of the tile (over the cropped end of the phone, not its content) */
.pop-c{left:50%;right:auto;top:auto;bottom:calc(100% - clamp(340px,30vw,420px) - 22px);transform:translateX(-50%);max-width:88%;white-space:nowrap}
.js .step .pop-c{opacity:0;transform:translate(-50%,14px) scale(.9)}
.js .step.in .pop-c{animation:popc-in .6s cubic-bezier(.34,1.56,.64,1) both}
@keyframes popc-in{from{opacity:0;transform:translate(-50%,14px) scale(.9)}to{opacity:1;transform:translateX(-50%)}}
.step-copy{padding-top:14px}
/* features: one card in the gap left of the phone, never over the screen */
.hpop-a{left:auto;right:calc(100% + 18px);top:46%}
@media (max-width:900px){.hpop-a{position:relative;right:auto;left:auto;top:auto;margin:16px auto 0;width:max-content;max-width:100%;order:2}.phone-col{display:flex;flex-direction:column}}
@media (prefers-reduced-motion:reduce){.js .step .pop-c{opacity:1;transform:translateX(-50%)}}

/* Founding Member block as a coupon: ticket notches bitten out of both sides, dashed perforation line inside the edge */
.fm{--notch:clamp(18px,2vw,28px);--perf:clamp(12px,1.4vw,20px);
  -webkit-mask:radial-gradient(circle var(--notch) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--notch) at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.fm::after{display:block;content:"";position:absolute;z-index:0;inset:var(--perf);left:var(--perf);bottom:var(--perf);width:auto;aspect-ratio:auto;background:none;border:2px dashed rgba(255,246,236,.55);border-radius:clamp(14px,2vw,24px);pointer-events:none;
  -webkit-mask:radial-gradient(circle calc(var(--notch) + 10px) at calc(var(--perf) * -1) 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle calc(var(--notch) + 10px) at calc(100% + var(--perf)) 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle calc(var(--notch) + 10px) at calc(var(--perf) * -1) 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle calc(var(--notch) + 10px) at calc(100% + var(--perf)) 50%,#0000 98%,#000) right/51% 100% no-repeat}
.fm-copy,.fm-visual{position:relative;z-index:1}
@media (min-width:901px) and (max-width:1180px){.phone-col{display:flex;flex-direction:column}.hpop-a{position:relative;right:auto;top:auto;margin:16px auto 0;width:max-content;max-width:100%}}

/* lock-price condition, moved out of the coupon to sit under the 4-step path it explains */
.wl-note{display:flex;align-items:center;gap:14px;max-width:760px;margin:clamp(36px,4vw,52px) auto 0;padding:16px 22px;border-radius:18px;background:var(--paper);border:1.5px dashed var(--sand);font-size:15px;line-height:1.65;color:var(--ink-2)}
.wl-note svg{flex:none;width:24px;height:24px;color:var(--red)}
@media (min-width:900px){.wl-note .ln{display:block}}
/* start steps: the key element of each screen lifts out of the phone, larger, over its own spot */
.step-shot .phone{position:relative}
.step-shot .phone .lift{position:absolute;z-index:3;top:10px;left:calc(10px + (100% - 20px) * var(--x) / 780);margin-top:calc((100% - 20px) * var(--y) / 780);width:calc((100% - 20px) * var(--w) / 780);height:auto;border-radius:12px;object-fit:fill;transform-origin:50% 50%;transform:scale(1.22);box-shadow:0 18px 34px -12px rgba(59,47,39,.45),0 0 0 1px rgba(59,47,39,.06)}
.js .step .lift{transform:scale(1);box-shadow:none;transition:transform .7s cubic-bezier(.34,1.56,.64,1),box-shadow .5s}
.js .step.in .lift{transform:scale(1.22);box-shadow:0 18px 34px -12px rgba(59,47,39,.45),0 0 0 1px rgba(59,47,39,.06)}
@media (prefers-reduced-motion:reduce){.js .step .lift{transition:none;transform:scale(1.22)}}
.step-shot .phone img.lift{height:auto!important;max-height:none;aspect-ratio:auto;object-fit:contain;border-radius:12px}
/* the feature card pops up just above the chosen room in the dollhouse */
#house-demo .hpop-a{position:absolute;right:auto;margin:0;z-index:8;order:0;width:max-content;max-width:none}
@media (max-width:900px){#house-demo .hpop-a{position:absolute;margin:0}}
@media (min-width:901px) and (max-width:1180px){#house-demo .hpop-a{position:absolute;margin:0}}
/* coupon: tighter gutter between copy and art, roomier side margins so neither half crowds the notched edges */
.fm{gap:clamp(12px,1.6vw,28px);padding-left:clamp(44px,6.5vw,104px);padding-right:clamp(44px,6.5vw,104px)}
.fm-bubble{right:2%}
@media (max-width:899px){.fm{padding-left:clamp(28px,8vw,48px);padding-right:clamp(28px,8vw,48px)}.fm-bubble{right:-2%}}
/* lock-price note now sits under the pricing button as plain text, no box */
.wl-note{justify-content:center;max-width:none;margin:clamp(28px,3vw,40px) auto 0;padding:0;background:none;border:0;border-radius:0;font-size:14.5px;text-align:left}
.wl-note svg{width:20px;height:20px}
#house-demo .hpop-a{padding:8px 14px 8px 8px}#house-demo .hpop-a b{font-size:14px}#house-demo .hpop-a small{font-size:12px}#house-demo .hpop-a .pop-ico{width:30px;height:30px}
/* coupon button reads louder than the heading: same container-width basis as .fm-title (7cqi), ~11% larger */
.fm-copy .fm-btn{font-size:clamp(22px,7.8cqi,56px);padding:.55em 1.4em;min-width:min(100%,460px)}
.fm-copy .fm-btn .btn-arrow{width:.95em;height:.95em}
@media (max-width:640px){#house-demo .hpop-a small{display:none}#house-demo .hpop-a{padding:5px 10px 5px 5px;gap:6px}#house-demo .hpop-a b{font-size:12px}#house-demo .hpop-a .pop-ico{width:24px;height:24px;border-radius:7px}#house-demo .hpop-a .pop-ico svg{width:15px;height:15px}}

/* start steps: slimmer phone bezel (5px); the lift maths reads the same --bez so the popped-out crop still lands on its spot */
.step-shot .phone{--bez:5px;padding:var(--bez) var(--bez) 0;border-radius:32px 32px 0 0}
.step-shot .phone>img:not(.lift){border-radius:27px 27px 0 0}
.step-shot .phone .lift{top:var(--bez);left:calc(var(--bez) + (100% - 2 * var(--bez)) * var(--x) / 780);margin-top:calc((100% - 2 * var(--bez)) * var(--y) / 780);width:calc((100% - 2 * var(--bez)) * var(--w) / 780)}
/* sign-up button: a soft light sweep every few seconds and the arrow nudging forward; the halo stays still */
.fm-copy .fm-btn{position:relative;overflow:hidden;animation:none;box-shadow:0 18px 32px -14px rgba(60,10,12,.7),0 0 0 6px rgba(255,246,236,.16)}
.fm-copy .fm-btn::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:28%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.75),rgba(255,255,255,0));transform:skewX(-20deg);animation:btn-sweep 3.6s ease-in-out infinite;pointer-events:none}
.fm-copy .fm-btn .btn-arrow{animation:btn-nudge 1.8s ease-in-out infinite}
@keyframes btn-sweep{0%,55%{left:-40%}85%,100%{left:120%}}
@keyframes btn-nudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.fm-copy .fm-btn::after,.fm-copy .fm-btn .btn-arrow{animation:none}}
.fm-copy .fm-btn,.fm-copy .fm-btn:hover{background:#fff}
/* card rides inside the chosen room, directly under its label (pure CSS, so it can't drift during autoplay) */
#house-demo .room .hpop-a{left:10px!important;top:calc(100% * 0 + 54px)!important;right:auto}
@media (max-width:1100px){#house-demo .room .hpop-a{top:36px!important;left:8px!important}}
@media (max-width:640px){#house-demo .room .hpop-a{top:34px!important;left:6px!important}}
#house-demo .room{overflow:visible}
/* the card hangs off the house on the room's own side: left rooms lower (clear of the room label), right rooms higher (clear of the octopus) */
#house-demo .room .hpop-a.side-l{left:auto!important;right:auto;top:auto!important;bottom:22%!important;margin-left:0;transform-origin:left center}
#house-demo .room .hpop-a.side-l{left:-64px!important}
#house-demo .room .hpop-a.side-r{left:auto!important;right:-64px!important;top:-18px!important}
@media (max-width:1100px){#house-demo .room .hpop-a.side-l{left:-36px!important;bottom:18%!important}#house-demo .room .hpop-a.side-r{right:-36px!important;top:-14px!important}}
@media (max-width:640px){#house-demo .room .hpop-a.side-l{left:-18px!important;bottom:14%!important}#house-demo .room .hpop-a.side-r{right:-18px!important;top:-12px!important}}
/* right rooms: card sits fully above the room top edge so it clears both the label and the octopus */
#house-demo .room .hpop-a.side-r{top:auto!important;bottom:calc(100% + 6px)!important}
@media (max-width:640px){#house-demo .room .hpop-a.side-l{bottom:auto!important;top:34px!important}#house-demo .room .hpop-a.side-r{bottom:calc(100% + 4px)!important}}
/* hero phone is clickable: each click shows the next app tab */
.tap-next{cursor:pointer;-webkit-tap-highlight-color:transparent}
.tap-next:focus-visible{outline:3px solid var(--red);outline-offset:6px;border-radius:44px}
.tap-next:active .phone{transform:scale(.985);transition:transform .12s}
@media (max-width:640px){#house-demo .room .hpop-a.side-l{top:auto!important;bottom:calc(100% + 4px)!important}}
/* hero hand: its cut top edge sat a few px below the phone frame (floor showed between them at the lower left); lift it so the edge tucks behind the frame. % of its own height, so it scales with the phone */
.with-hand .hero-hand{translate:0 -.75%}
/* right rooms (desktop): card sits at the top of the room, mostly outside the house to the right, so it stays in its own room without crossing into the one above */
@media (min-width:1181px){#house-demo .room .hpop-a.side-r{bottom:auto!important;top:2px!important;right:auto!important;left:calc(100% - 44px)!important}}
@media (min-width:1181px) and (max-width:1366px){#house-demo .room .hpop-a.side-r{left:calc(100% - 20px)!important;top:-4px!important}}

/* footer: 5 links + LINE OA may wrap, let the row grow */
.foot nav{height:auto;min-height:32px}

/* ---- QA มือถือ/ไอแพด 27 ต.ค. 2569 ---- */
/* เมนูบนมือถือ: จางขอบขวาให้รู้ว่าเลื่อนต่อได้ และเว้นท้ายให้เมนูสุดท้ายโผล่เต็ม */
@media (max-width:900px){nav.wrap .nav-links{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);padding-right:28px}}
/* about: การ์ด LINE ไม่ดันเกินขอบจอ 375 */
@media (max-width:1099px){.line2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:380px){.line2-copy{padding-left:18px;padding-right:18px}}
/* กลุ่มคำที่ต้องอยู่ด้วยกัน ถ้าไม่พอจะขึ้นบรรทัดใหม่ทั้งกลุ่ม */
.keep{display:inline-block}
/* pricing: น้องหมึกบนตารางเทียบเกาะขอบบนการ์ด ไม่บังคำว่า House และไม่ล้นจอ */
@media (max-width:900px){.cmp-mee{width:72px;right:6px;top:-52px}}
@media (min-width:641px) and (max-width:900px){.cmp-mee{width:96px;right:10px;top:-70px}}
/* pricing: ปุ่มหัวตารางกดง่ายขึ้นโดยไม่ขยับเลย์เอาต์ */
.cmp-pick{padding-block:12px;margin-block:-12px}
/* ท้ายหน้า: ลิงก์สูงพอให้นิ้วกด */
.foot nav{height:auto}.foot nav a{line-height:44px}

/* ---- QA รอบ 2 27 ต.ค. 2569 ---- */
/* เมนูมือถือ: ปุ่มแฮมเบอร์เกอร์ข้างปุ่มสมัคร (ปุ่มสร้างด้วย site.js ถ้าไม่มี JS จะเห็นแถบเมนูเลื่อนแบบเดิม) */
.nav-toggle{display:none}
@media (max-width:640px){
  .js nav.wrap{position:relative;flex-wrap:nowrap;column-gap:10px}
  .js nav.wrap>.btn{margin-left:auto}
  .js .nav-toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-left:-4px;margin-right:-8px;border:0;border-radius:12px;background:transparent;color:var(--cocoa);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .js .nav-toggle:focus-visible{outline:2px solid var(--red);outline-offset:2px}
  .js .nav-toggle svg{width:26px;height:26px;overflow:visible}
  .js .nav-toggle path{transition:transform .25s var(--ease),opacity .2s;transform-origin:12px 12px}
  .js nav.wrap.nav-open .nav-toggle .l1{transform:translateY(5px) rotate(45deg)}
  .js nav.wrap.nav-open .nav-toggle .l2{opacity:0}
  .js nav.wrap.nav-open .nav-toggle .l3{transform:translateY(-5px) rotate(-45deg)}
  .js nav.wrap .nav-links{display:none;position:absolute;left:0;right:0;top:100%;order:0;width:auto;margin:0;flex-direction:column;align-items:stretch;gap:0;overflow:visible;padding:4px max(16px,env(safe-area-inset-right,0px)) 14px max(16px,env(safe-area-inset-left,0px));background:#F8EEDB;border-bottom:1px solid var(--sand-soft);box-shadow:0 18px 30px -18px rgba(59,47,39,.35);-webkit-mask-image:none;mask-image:none}
  .js nav.wrap.nav-open .nav-links{display:flex}
  .js nav.wrap .nav-links a{font-size:17px;line-height:1.4;padding:13px 2px;border-bottom:1px solid var(--sand-soft);background-image:none}
  .js nav.wrap .nav-links a:last-child{border-bottom:0}
  .js nav.wrap .nav-links a[aria-current="page"]{color:var(--red);font-weight:600}
}
@media (max-width:640px) and (prefers-reduced-motion:reduce){.js .nav-toggle path{transition:none}}
/* about มือถือ: คำบรรยายการ์ด LINE ฉบับ 2 บรรทัด */
.l2-short{display:none}
@media (max-width:640px){.l2-full{display:none}.l2-short{display:inline}.l2-short .sl{display:block}}
/* pricing มือถือ: น้องหมึกย้ายไปเกาะมุมคำว่า "แพ็กเกจ" ในหัวข้อ */
@media (max-width:640px){
  .cmp-mee{display:none}
  #compare-title>.keep{display:table;margin-inline:auto}
  #compare-title>.keep:first-child{position:relative}
  #compare-title>.keep:first-child::after{content:"";position:absolute;width:58px;aspect-ratio:600/546;right:calc(-.66 * 58px);top:calc(-.36 * 58px + 6px);background:url(muek/muek-perch.webp) center/contain no-repeat;pointer-events:none}
}
/* pricing ไอแพดแนวตั้ง: ตารางแคบลง และมือน้องหมึกเกาะขอบโค้งมุมขวาบนพอดี */
@media (min-width:641px) and (max-width:900px){
  .cmp-box{max-width:540px}
  .cmp-mee{width:76px;right:calc(6px - .44 * 76px);top:calc(6px - .30 * 76px)}
  .cmp thead th:last-child{padding-right:40px}
}

/* ---- QA รอบ 3 27 ต.ค. 2569: hero หน้าแรกบนมือถือและไอแพดแนวตั้ง (จอ 900px ขึ้นไปไม่เปลี่ยน) ---- */
@media (max-width:899px){
  .hero{padding-top:24px}
  .hero .ctas .btn-line{display:none}
  .hero .hb-tag{display:block;margin-top:clamp(14px,2.4vw,22px)}
  .hero-copy{gap:22px;padding-bottom:0}
  .hero .lede{display:none}
  .hero .ctas .btn{flex:0 0 auto}
  .hero .stage{padding-top:16px}
  .hero .hb-tag{font-size:clamp(28px,8vw,40px);line-height:1.3}
}
@media (max-width:699px){
  .hero-copy{align-items:center;text-align:center}
  .hero .hb-top{justify-content:center}
  .hero .ctas{justify-content:center}
}
@media (min-width:700px) and (max-width:899px){
  .hero-grid{grid-template-columns:minmax(0,370px) 270px;justify-content:center;align-items:center;gap:40px}
  .hero-copy{max-width:370px}
  .hero-phone{width:240px}
  .hero .hb-tag{font-size:clamp(34px,4.8vw,40px)}
  .hero .lede{display:block;font-size:17px}
  .hero .stage{padding:0}
}
@media (min-width:700px) and (max-width:799px){
  .hero-grid{grid-template-columns:minmax(0,330px) 240px;gap:32px}
  .hero-copy{max-width:330px}
  .hero-phone{width:215px}
}
@media (min-width:700px) and (max-width:819px){.hero .lede .sl{display:block}}

/* QA รอบ 3: ส่วนบ้านตุ๊กตาบนมือถือ ตัดภาพบ้านออก ปุ่มชื่อห้องอยู่ซ้าย โทรศัพท์ขวา การ์ดเหลื่อมขอบบนจอ */
@media (max-width:699px){
  .d1page .hs-copy{display:contents}
  .d1page .hs-grid{display:grid;grid-template-columns:auto 198px;justify-content:center;column-gap:16px;row-gap:26px;align-items:center}
  .d1page .hs-head{grid-column:1/-1;text-align:center}
  .d1page .hs-head .h2{white-space:normal}
  .d1page .house{grid-column:1;grid-row:2;margin:0;display:flex;flex-direction:column;align-items:stretch;gap:14px;max-width:150px}
  .d1page .phone-col{grid-column:2;grid-row:2;width:auto;margin:30px 0 0;position:relative;display:block}
  .d1page .h-phone{padding:7px;border-radius:30px}
  .d1page .h-phone .screens{border-radius:23px}
  .d1page .house .shop{filter:none}
  .d1page .shop .roof,.d1page .house .floor,.d1page .house .cat{display:none}
  .d1page .shop .face{margin:0;padding:0;background:none;display:flex;flex-direction:column;align-items:stretch;gap:8px}
  .d1page .shop .storey{display:contents}
  .d1page .shop .room{height:auto;width:100%;background:none;box-shadow:none;border-radius:999px;padding:0;position:relative}
  .d1page .shop .room .art{display:none}
  .d1page .shop .room .name{position:static;width:100%;font-size:13px;font-weight:600;line-height:1.25;padding:8px 12px;gap:6px;border-radius:999px;min-height:40px;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;text-align:left}
  .d1page .shop .room .name svg{width:14px;height:14px;flex:none}
  .d1page .shop .room[aria-selected="true"] .name{background:#fff;color:var(--red);box-shadow:0 0 0 2px #fff,0 8px 16px -8px rgba(0,0,0,.45)}
  .d1page .shop .room[aria-selected="true"]{box-shadow:none}
  .d1page .room .hpop{display:none}
  .d1page .phone-col .hpop-a{position:absolute;z-index:6;left:50%!important;right:auto!important;translate:-50% 0;top:-28px!important;bottom:auto!important;margin:0;width:max-content;max-width:214px;order:0;padding:9px 12px 9px 9px}
  .d1page .phone-col .hpop-a b{font-size:13.5px}.d1page .phone-col .hpop-a small{font-size:11.5px}
}
/* QA รอบ 3: ไอแพดแนวตั้ง บ้านตุ๊กตาเต็มหลังอยู่ซ้าย โทรศัพท์อยู่ขวา */
@media (min-width:700px) and (max-width:900px){
  .d1page .hs-grid{gap:28px}
  .d1page .house{max-width:none}
  .hs-wave{display:block}
  .d1page{background:linear-gradient(var(--red) 0 86%,var(--ivory) 86%)}
}
/* ไอแพดทุกขนาด: โทรศัพท์สูงเท่าหัวข้อรวมบ้านตุ๊กตา ขอบบนตรงหัวข้อ ขอบล่างตรงพื้นบ้าน */
@media (min-width:700px) and (max-width:1366px){
  .d1page .hs-grid{grid-template-columns:minmax(0,1fr) var(--pw,230px);align-items:stretch}
  .d1page .phone-col{width:auto;margin:0;display:flex;flex-direction:column;justify-content:flex-start}
}
/* QA รอบ 3: ไอแพดแนวตั้ง: โลโก้ เมนู และปุ่มสมัครอยู่แถวเดียวกันเหมือนไอแพดแนวนอน ตัดเมนู "หน้าหลัก" ออก (กดโลโก้กลับหน้าหลักแทน) */
@media (min-width:641px) and (max-width:900px){
  nav.wrap{flex-wrap:nowrap;column-gap:18px}
  nav.wrap>.brand{flex:none;font-size:22px}
  nav.wrap>.brand img{width:34px;height:34px}
  nav.wrap .nav-links{order:2;width:auto;flex:0 1 auto;min-width:0;margin-left:auto;padding-bottom:0;gap:0 16px;overflow:visible;-webkit-mask-image:none;mask-image:none}
  nav.wrap .nav-links a:first-child{display:none}
  nav.wrap .nav-links a{font-size:14.5px}
  nav.wrap>.btn{order:3;margin-left:0;flex:none}
}
/* QA รอบ 3: มือถือ: คลื่นครีมด้านหลังส่วนบ้านตุ๊กตา */
@media (max-width:699px){
  .hs-wave{display:block;top:auto;bottom:0;height:52%}
  .d1page{background:linear-gradient(var(--red) 0 86%,var(--ivory) 86%)}
}
/* QA รอบ 3: มือถือและไอแพดแนวตั้ง แถบปิดท้ายวางข้อความกับน้องหมึกซ้ายขวาเหมือนจอใหญ่ */
@media (max-width:899px){
  .cta2{grid-template-columns:auto auto;justify-content:center;text-align:left;gap:clamp(14px,4vw,44px)}
  .cta2-copy{min-width:0}
  .cta2-actions{justify-content:flex-start}
  .cta2-art,.cta2-art.orbit{order:0;justify-self:end;width:clamp(128px,34vw,280px);max-width:none;padding:clamp(6px,1.4vw,12px)}
}
@media (max-width:420px){
  .cta2-title{font-size:26px}
  .cta2-sub{font-size:14.5px}
  .cta2-sub .ln{display:inline}
  .cta2-actions .btn{padding-left:22px;padding-right:18px}
}

/* ---- QA รอบ 3: ท้ายหน้าแบบใหม่ โลโก้ซ้าย ลิงก์สามบรรทัดขวา ช่องทางติดต่อกับลิขสิทธิ์อยู่แถวล่าง ---- */
footer.f2{background:var(--cocoa-deep);color:var(--sand-soft)}
.f2-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:24px 40px;padding-top:44px;padding-bottom:40px}
.f2-logo{display:inline-flex;align-items:center;gap:10px;color:var(--ivory);text-decoration:none;font-weight:700;font-size:26px;line-height:1;min-height:44px}
.f2-logo img{width:36px;height:36px;border-radius:var(--radius-icon)}
.f2-brand p{margin:6px 0 0;font-size:15px;color:var(--sand-soft)}
.f2-links{display:flex;flex-direction:column;align-items:flex-start;gap:0;height:auto;padding:0;margin:0}
.f2-links a{color:var(--ivory);text-decoration:none;font-size:15px;line-height:22px;padding:11px 0;margin:-2px 0}
.f2-links a:hover{text-decoration:underline}
.f2-bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 24px;padding-top:4px;padding-bottom:18px;border-top:1px solid rgba(255,246,236,.12)}
.f2-contact{margin:0;display:flex;flex-wrap:wrap;gap:0 22px}
.f2-contact a{color:var(--sand-soft);text-decoration:none;font-size:13.5px;line-height:44px}
.f2-contact a:hover{color:var(--ivory);text-decoration:underline}
.f2-brand .f2-copy{margin:14px 0 0;font-size:13px;color:var(--sand-soft);opacity:.85}
@media (max-width:640px){
  .f2-in{flex-direction:column;gap:16px;padding-top:36px;padding-bottom:20px}
  .f2-in{padding-bottom:28px}
}
.f2-links a{display:inline-flex;align-items:center;gap:10px}
.f2-links a svg{flex:none;width:18px;height:18px;color:var(--sand)}
.f2-links a:hover svg{color:var(--ivory)}
/* QA รอบ 3: hero ไอแพดแนวนอน: ดึงโทรศัพท์เข้ามาใกล้ข้อความ */
@media (min-width:901px) and (max-width:1366px){.hero .stage{translate:calc(-1 * clamp(110px,12vw,150px)) 0}}

/* waitlist: Founding Member vs regular sign-up, plus one worked example (2026-10-28) */
.fx-sec .head{margin-bottom:clamp(28px,4vw,44px)}
.fx-table{max-width:960px;margin:0 auto;background:var(--paper);border-radius:var(--radius-lg);box-shadow:0 1px 0 rgba(59,47,39,.04),0 18px 40px -26px rgba(59,47,39,.25);overflow:hidden}
.fx-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(0,1.15fr);border-bottom:1px solid #EFE6D8}
.fx-row:last-child{border-bottom:0}
.fx-row>span{padding:clamp(14px,1.5vw,20px) clamp(14px,1.8vw,26px);line-height:1.5;font-size:clamp(15px,1.3vw,17px);text-wrap:balance}
.fx-k{font-weight:600;color:var(--cocoa-deep)}
.fx-n{color:var(--ink-2)}
.fx-f{background:#FBEDE6;color:var(--red-deep);font-weight:600}
.fx-row b{font-size:clamp(20px,1.9vw,24px);font-weight:700;line-height:1.1}
.fx-head>span{font-weight:700;font-size:clamp(15px,1.4vw,18px);padding-top:18px;padding-bottom:18px}
.fx-head .fx-n{color:var(--cocoa)}
.fx-head .fx-f{background:var(--red);color:var(--card);display:flex;align-items:center;gap:8px;white-space:nowrap}
.fx-head .fx-f svg{width:20px;height:20px;flex:none}
.fx-ex{max-width:960px;margin:clamp(56px,7vw,88px) auto 0}
.fx-ex-title{margin:0 0 clamp(24px,3vw,36px);text-align:center;font-size:clamp(20px,2vw,26px);line-height:1.45;color:var(--cocoa-deep)}
.fx-track{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;position:relative}
.fx-track::before{content:"";position:absolute;top:0;left:7px;right:7px;height:8px;border-radius:99px;background:linear-gradient(90deg,var(--red) 0,var(--red) 100%);opacity:.9}
.fx-track li{position:relative;font-size:15.5px;line-height:1.55;color:var(--ink-2);text-wrap:balance}
.fx-track li::before{content:"";position:absolute;top:-29px;width:22px;height:22px;border-radius:50%;background:var(--card);border:4px solid var(--red);box-sizing:border-box}
.fx-track li:first-child::before{left:-4px}
.fx-track li.is-mid{text-align:center}
.fx-track li.is-mid::before{left:calc(50% - 11px)}
.fx-track li:last-child{text-align:right}
.fx-track li:last-child::before{right:-4px;background:var(--red)}
.fx-track p{margin:0}
.fx-day{font-weight:700;color:var(--cocoa-deep);font-size:16.5px;margin-bottom:2px!important}
.fx-ends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px);margin-top:clamp(32px,4vw,44px)}
.fx-end{border-radius:var(--radius-lg);padding:clamp(22px,2.4vw,30px) clamp(20px,2.4vw,32px);border:1.5px solid var(--sand-soft);background:var(--paper)}
.fx-end.is-yes{border-color:#EFC3B8;background:#FBEDE6}
.fx-end h4{margin:0 0 14px;font-size:clamp(17px,1.6vw,20px);line-height:1.45;color:var(--cocoa-deep)}
.fx-end.is-yes h4{color:var(--red-deep)}
.fx-end ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fx-end li{position:relative;padding-left:26px;font-size:15.5px;line-height:1.55;color:var(--cocoa)}
.fx-end li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--sand)}
.fx-end.is-yes li::before{background:var(--red)}
.fx-note{margin:clamp(22px,2.6vw,30px) auto 0;text-align:center;font-size:15px;line-height:1.6;color:var(--ink-2);text-wrap:balance}
@media (max-width:640px){
  .fx-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fx-head>.fx-n,.fx-head>.fx-f{font-size:15px;justify-content:center}
  .fx-head .fx-f svg{width:17px;height:17px}
  .fx-row>.fx-k{grid-column:1/-1;padding-bottom:4px;background:var(--paper);font-size:14px;color:var(--ink-2);font-weight:600}
  .fx-row>.fx-n,.fx-row>.fx-f{padding-top:8px}
  .fx-head>.fx-k{display:none}
  .fx-head>.fx-n,.fx-head>.fx-f{padding-top:16px}
  .fx-row>span{font-size:15px}
  .fx-track{grid-template-columns:1fr;gap:26px;padding:0 0 0 34px}
  .fx-track::before{top:6px;bottom:6px;left:7px;right:auto;width:8px;height:auto}
  .fx-track li,.fx-track li.is-mid,.fx-track li:last-child{text-align:left}
  .fx-track li::before,.fx-track li.is-mid::before,.fx-track li:first-child::before,.fx-track li:last-child::before{top:2px;left:-35px;right:auto}
  .fx-ends{grid-template-columns:1fr}
}
.price-foot.fm-foot{max-width:640px;margin:10px auto 0}

/* QA รอบ 4 (28 ต.ค.): แถบปิดท้ายบนมือถือและไอแพดแนวตั้ง
   ข้อความสี่บรรทัดทางซ้าย วงกลมน้องหมึกขวาบน ปุ่มอยู่ใต้วงกลม
   ขอบบนวงกลมเสมอ "สมัครก่อน" และขอบล่างปุ่มเสมอบรรทัดสุดท้ายของข้อความ */
@media (max-width:899px){
  .cta2{grid-template-columns:auto auto;grid-template-areas:"t a" "s a" "s b";justify-content:center;text-align:left;column-gap:clamp(14px,4vw,44px);row-gap:0;align-items:start}
  .cta2-copy{display:contents}
  .cta2-title{grid-area:t;align-self:start}
  .cta2-sub{grid-area:s;align-self:end;margin-bottom:0}
  .cta2-sub .ln,.cta2-sub .cta-br,.cta2-sub .ln:first-child>.ph:first-child{display:block}
  .cta2-sub .ln,.cta2-sub .ln .ph{white-space:nowrap}
  .cta2-art,.cta2-art.orbit{grid-area:a;order:0;align-self:start;justify-self:center;max-width:none}
  .cta2-actions{grid-area:b;align-self:end;justify-content:center;margin-top:10px}
  .cta2-actions .btn{white-space:nowrap}
}
@media (max-width:420px){.cta2-art,.cta2-art.orbit{width:109px}}
@media (min-width:421px) and (max-width:699px){.cta2-art,.cta2-art.orbit{width:128px}}
@media (min-width:700px) and (max-width:899px){.cta2-art,.cta2-art.orbit{width:max(128px,calc(128px + (100vw - 744px) * .097))}}

/* waitlist: the corner-clinging octopus from the pricing table holds this table too, mirrored onto the top-left corner so it sits on the light header cell */
.fx-box{position:relative;max-width:960px;margin:0 auto}
.fx-mee{position:absolute;z-index:2;width:112px;left:calc(6px - .44 * 112px);top:calc(6px - .30 * 112px);transform:scaleX(-1);pointer-events:none}
@media (max-width:1100px){.fx-mee{width:96px;left:calc(6px - .44 * 96px);top:calc(6px - .30 * 96px)}}
@media (max-width:640px){.fx-mee{width:66px;left:-12px;top:-50px}}
.fx-kl{display:inline-flex;align-items:flex-start;gap:10px}
.fx-ico{flex:none;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.fx-ico{width:18px;height:18px}.fx-kl{gap:8px}}
/* QA รอบ 4: ปุ่มห้องบนมือถือ เรียงตามแถบเมนูในแอป */
@media (max-width:699px){
  .d1page .shop .room[data-room="home"]{order:1}
  .d1page .shop .room[data-room="tasks"]{order:2}
  .d1page .shop .room[data-room="shopping"]{order:3}
  .d1page .shop .room[data-room="calendar"]{order:4}
  .d1page .shop .room[data-room="pets"]{order:5}
  .d1page .shop .room[data-room="money"]{order:6}
}

/* waitlist: worked example as a moving timeline. One octopus walks the 30 free days, the track forks at the decision point, and the octopus jumps into the card of the path it took (2026-10-28) */
@keyframes tl-bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
@keyframes tl-in{0%{scale:.6;opacity:0}70%{scale:1.08;opacity:1}100%{scale:1;opacity:1}}
@keyframes tl-ring{0%,100%{rotate:0deg}20%{rotate:16deg}40%{rotate:-12deg}60%{rotate:8deg}80%{rotate:-4deg}}
.tl-tabs{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:0}
.tl-tabs button{font:inherit;font-weight:600;font-size:15px;border:1.5px solid var(--sand);background:var(--paper);color:var(--cocoa);padding:9px 18px;border-radius:99px;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.tl-tabs button.on{background:var(--red);border-color:var(--red);color:var(--card)}
.tl-st{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;margin-top:72px}
.tl-box{position:relative;min-height:380px}
.tl-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tl-trk{fill:none;stroke:var(--sand-soft);stroke-width:12;stroke-linecap:round}
.tl-fil{fill:none;stroke:var(--red);stroke-width:12;stroke-linecap:round}
.tl-pin{fill:var(--card);stroke:var(--sand);stroke-width:5;transition:fill .3s,stroke .3s}
.tl-pin.hit{stroke:var(--red)}
.tl-pin.solid.hit{fill:var(--red)}
.tl-ends{display:flex;flex-direction:column;justify-content:space-between;gap:40px}
.tl-lbl{position:absolute;margin:0;font-size:14px;line-height:1.4;color:var(--ink-2);white-space:nowrap;z-index:1}
.tl-lbl b{display:block;color:var(--cocoa-deep);font-size:15px}
.tl-cnt{position:absolute;left:0;margin:0;font-weight:700;color:var(--ink-2);font-size:15px;background:var(--paper);padding:4px 14px;border-radius:99px;box-shadow:0 0 0 1.5px var(--sand-soft) inset;white-space:nowrap;z-index:1}
.tl-cnt b{display:inline;font-size:22px;color:var(--red);font-variant-numeric:tabular-nums}
.tl-bell{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--card);box-shadow:0 0 0 3px var(--sand);display:grid;place-items:center;transition:box-shadow .3s;z-index:1}
.tl-bell svg{width:15px;height:15px;fill:var(--sand-ink)}
.tl-bell.hit{box-shadow:0 0 0 3px var(--red)}
.tl-bell.hit svg{fill:var(--red);animation:tl-ring 1s ease-in-out}
.tl-mee{position:absolute;width:0;height:0;z-index:4}
.tl-mee.fly{transition:left .55s var(--ease),top .55s var(--ease)}
.tl-mee img{max-width:none;position:absolute;width:88px;height:auto;left:-44px;bottom:-4px;animation:tl-bob 1.1s ease-in-out infinite;transition:width .55s var(--ease),left .55s var(--ease)}
.tl-mee.fly img{animation:none}
.tl-mee.gone{visibility:hidden}
.tl-say{display:block;position:absolute;bottom:96px;left:0;transform:translateX(-50%);width:max-content;max-width:250px;margin:0;background:var(--card);border-radius:16px;padding:10px 14px;font-size:14.5px;line-height:1.45;color:var(--cocoa-deep);box-shadow:0 10px 24px -12px rgba(59,47,39,.35);text-align:center;text-wrap:balance}
.tl-say::after{content:"";position:absolute;left:50%;bottom:-7px;width:14px;height:14px;margin-left:-7px;background:var(--card);transform:rotate(45deg)}
.tl-say b{display:inline-block;color:var(--red)}
.tl-say.in{animation:tl-in .4s var(--spring) both}
.tl-say.l{transform:none;left:-40px}.tl-say.l::after{left:50px}
.tl-say.r{transform:none;left:auto;right:-40px}.tl-say.r::after{left:auto;right:33px}
.tl-mee.fly .tl-say{visibility:hidden}
.tl-end{position:relative;border-radius:22px;padding:16px 18px 16px 88px;min-height:104px;background:var(--paper);border:2px solid var(--sand-soft);opacity:.55;transition:opacity .4s,border-color .4s,box-shadow .4s,transform .4s var(--spring)}
.tl-end{transform-origin:right center}
.tl-end.on{opacity:1;transform:scale(1.03);box-shadow:0 18px 36px -22px rgba(59,47,39,.45)}
.tl-y.on{border-color:var(--red);background:#FBEDE6}
.tl-n.on{border-color:var(--olive)}
.tl-slot{position:absolute;left:12px;top:14px;width:66px;height:auto;visibility:hidden}
.tl-slot.show{visibility:visible}
.tl-tag{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin:0 0 2px}
.tl-end h4{margin:0 0 8px;font-size:16.5px;line-height:1.4;color:var(--cocoa-deep)}
.tl-y h4{color:var(--red-deep)}
.tl-end p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-2);text-wrap:balance}
.tl-yrs{display:flex;gap:6px;margin:8px 0 0}
.tl-yrs span{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;background:var(--card);border-radius:10px;padding:6px;font-size:12px;color:var(--ink-2);text-align:center;line-height:1.3;white-space:nowrap;opacity:0}
.tl-yrs b{display:block;color:var(--red);font-size:14px}
.tl-y.on .tl-yrs span{animation:tl-in .45s var(--spring) both}
.tl-y.on .tl-yrs span:nth-child(2){animation-delay:.25s}.tl-y.on .tl-yrs span:nth-child(3){animation-delay:.5s}
@media (max-width:900px){
  .tl-st{grid-template-columns:1fr}
  .tl-box{min-height:0;height:400px}
  .tl-ends{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
  .tl-mee img{width:72px;left:-36px;bottom:auto;top:-36px}
  .tl-say{bottom:auto;top:-22px;left:44px;transform:none;max-width:min(150px,38vw);font-size:13.5px;text-align:left}
  .tl-say::after{left:-6px;top:20px;bottom:auto;margin:0}
  .tl-say.l,.tl-say.r{left:44px;right:auto}.tl-say.l::after,.tl-say.r::after{left:-6px;right:auto}
  .tl-say.flip{left:auto;right:44px}.tl-say.flip::after{left:auto;right:-6px}
  .tl-end{padding:72px 12px 14px;text-align:center}
  .tl-slot{left:50%;margin-left:-30px;top:8px;width:60px}
  .tl-end.on{transform:scale(1.02)}
  .tl-yrs{display:none}
}
@media (prefers-reduced-motion:reduce){.tl *{animation:none!important;transition:none!important}.tl-yrs span{opacity:1}}

/* QA รอบ 4: ไอแพดแนวตั้ง แถบปิดท้ายใช้แบบจอ 1024 ทั้งก้อน (ค่าคัดลอกจากจอ 1024) แล้วย่อตามความกว้างจอด้วยสคริปต์ใน site.js */
@media (min-width:700px) and (max-width:899px){
  .cta2-sec .cta2-title,.cta2-sec .cta2-sub .ln{white-space:nowrap}
  .cta2-sec .cta2{width:944px!important;height:450.094px!important;padding-top:45.056px!important;padding-bottom:45.056px!important;align-items:center!important;grid-template-columns:295.422px 440px!important;grid-template-rows:360px!important;grid-template-areas:none!important;column-gap:51.2px!important;row-gap:51.2px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1){display:block!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1){grid-row-start:auto!important;grid-row-end:auto!important;grid-column-start:auto!important;grid-column-end:auto!important;font-size:40.96px!important;line-height:49.9712px!important;align-self:auto!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1) > :nth-child(1){font-size:40.96px!important;line-height:49.9712px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1) > :nth-child(1) > :nth-child(1){font-size:40.96px!important;line-height:49.9712px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1) > :nth-child(2){font-size:40.96px!important;line-height:49.9712px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(1){font-size:40.96px!important;line-height:49.9712px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(1) > :nth-child(1){font-size:40.96px!important;line-height:49.9712px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(1) > :nth-child(2){top:43.4062px!important;right:-6.875px!important;bottom:-8.192px!important;left:-6.875px!important;font-size:40.96px!important;line-height:49.9712px!important;text-align:start!important;inset:43.4062px -6.875px -8.192px!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(1) > :nth-child(2) > :nth-child(1) > :nth-child(2) > :nth-child(1){font-size:40.96px!important;line-height:49.9712px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(2){margin-top:16.384px!important;grid-row-start:auto!important;grid-row-end:auto!important;grid-column-start:auto!important;grid-column-end:auto!important;align-self:auto!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(3){margin-top:24.576px!important;justify-content:normal!important;grid-row-start:auto!important;grid-row-end:auto!important;grid-column-start:auto!important;grid-column-end:auto!important;align-self:auto!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(3) > :nth-child(1){text-align:start!important;white-space:normal!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(3) > :nth-child(1) > :nth-child(1){text-align:start!important;white-space:normal!important}
  .cta2-sec .cta2 > :nth-child(1) > :nth-child(3) > :nth-child(1) > :nth-child(1) > :nth-child(1){text-align:start!important;white-space:normal!important}
  .cta2-sec .cta2 > :nth-child(2){width:360px!important;height:360px!important;max-width:440px!important;padding-top:16px!important;padding-right:16px!important;padding-bottom:16px!important;padding-left:16px!important;grid-template-columns:328px!important;grid-template-rows:328px!important;grid-row-start:auto!important;grid-row-end:auto!important;grid-column-start:auto!important;grid-column-end:auto!important;align-self:auto!important;justify-self:start!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(2)::before{top:18px!important;right:18px!important;bottom:18px!important;left:18px!important;width:324px!important;height:324px!important;text-align:start!important;inset:18px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1){width:328px!important;height:227.047px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(1){width:328px!important;height:227.047px!important;text-align:start!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){top:92.5625px!important;right:224.859px!important;bottom:62.6875px!important;left:28.0625px!important;width:75.0781px!important;height:71.7969px!important;text-align:start!important;inset:92.5625px 224.859px 62.6875px 28.0625px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){top:36.4375px!important;right:209.578px!important;bottom:131.609px!important;left:61.5938px!important;width:56.8281px!important;height:59px!important;text-align:start!important;inset:36.4375px 209.578px 131.609px 61.5938px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(4){top:5.09375px!important;right:114.812px!important;bottom:147.609px!important;left:122.078px!important;width:91.1094px!important;height:74.3438px!important;text-align:start!important;inset:5.09375px 114.812px 147.609px 122.078px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){top:31.6875px!important;right:32.8125px!important;bottom:131.219px!important;left:213.188px!important;width:82px!important;height:64.1406px!important;text-align:start!important;inset:31.6875px 32.8125px 131.219px 213.188px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(6){top:92.9219px!important;right:11.6875px!important;bottom:60.9062px!important;left:242.719px!important;width:73.5938px!important;height:73.2188px!important;text-align:start!important;inset:92.9219px 11.6875px 60.9062px 242.719px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){width:75.0781px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){width:56.8281px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){height:64.1406px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){width:75.0781px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){width:56.8281px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){height:64.1406px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){width:75.0781px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){width:56.8281px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){height:64.1406px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){width:75.0781px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){width:56.8281px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){height:64.1406px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){width:75.0781px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){width:56.8281px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){height:64.1406px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){width:75.0781px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){width:56.8281px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){height:64.1406px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(2){width:75.0781px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(3){width:56.8281px!important}
  .cta2-sec .cta2 > :nth-child(2) > :nth-child(1) > :nth-child(5){height:64.1406px!important}
  .cta2-sec .cta2-sub .ln{display:block!important;white-space:normal!important}
  .cta2-sec .cta2-sub .ph{display:inline!important}
  .cta2-sec .cta2-sub .cta-br{display:inline!important}
}