/* ════════════════════════════════════════════════════════════════ WorkCo v8 — "Composed" Cinematic ink opening → editorial paper body → mirrored ink finale. Teal is the only voice of action. Time (mono) is the decorative system. ════════════════════════════════════════════════════════════════ */ :root{ --ink:#070C10; /* near-black, blue-green undertone */ --ink-2:#0B1418; --ink-3:#122029; --paper:#FAF9F6; /* warm editorial white */ --paper-2:#F2F1EC; --teal:#0D9488; --teal-bright:#2DD4BF; --teal-deep:#115E59; --line-green:#06C755; /* LINE CTA only */ --tx:#0F172A; /* text on paper */ --tx-2:#475569; --tx-3:#64748B; --wh:#EDF2F0; /* text on ink */ --wh-2:rgba(237,242,240,.68); --wh-3:rgba(237,242,240,.42); --bd:#E4E2DA; /* border on paper */ --bd-ink:rgba(237,242,240,.12); --r-lg:28px; --r-md:20px; --r-sm:14px; --ease:cubic-bezier(.22,.7,.16,1); --ease-io:cubic-bezier(.65,0,.35,1); --shadow-lg:0 24px 60px -18px rgba(7,12,16,.22), 0 4px 14px rgba(7,12,16,.06); --shadow-sm:0 2px 10px rgba(7,12,16,.07); --font:'Anuphan','Noto Sans TC',-apple-system,'Noto Sans Thai',sans-serif; --serif:'Noto Serif Thai','Noto Serif TC','Anuphan',serif; --mono:'IBM Plex Mono','SF Mono',monospace; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ font-family:var(--font);font-size:17px;line-height:1.8;color:var(--tx); background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;background:none;border:0;cursor:pointer;color:inherit} ::selection{background:var(--teal);color:#fff} /* ── language switch (th / en / zh) ── */ body[data-lang="th"] .en,body[data-lang="th"] .zh{display:none!important} body[data-lang="en"] .th,body[data-lang="en"] .zh{display:none!important} body[data-lang="zh"] .th,body[data-lang="zh"] .en{display:none!important} /* ── utilities ── */ .wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,4vw,48px)} .wrap--narrow{max-width:820px} .mono{font-family:var(--mono);letter-spacing:.14em;font-weight:500} .serif{font-family:var(--serif)} .kicker{font-size:11px;text-transform:uppercase;color:var(--tx-3);margin-bottom:22px} .kicker--teal{color:var(--teal-bright)} .skip{position:fixed;top:-60px;left:16px;z-index:200;background:var(--teal);color:#fff;padding:10px 18px;border-radius:10px;transition:top .2s} .skip:focus{top:14px} :focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px} /* ── reveal engine (JS gated) ── */ html.js .rv{opacity:0;transform:translateY(26px);filter:blur(6px)} html.js .rv.is-in{opacity:1;transform:none;filter:none; transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease); transition-delay:calc(var(--rvd,0)*90ms)} /* ── film grain ── */ #grain{position:fixed;inset:-60px;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.9'/%3E%3C/svg%3E"); background-size:300px} @keyframes grainShift{ 0%,100%{transform:translate(0,0)}20%{transform:translate(-24px,12px)}40%{transform:translate(14px,-20px)} 60%{transform:translate(-10px,-14px)}80%{transform:translate(20px,18px)}} html.js #grain{animation:grainShift 1.4s steps(5) infinite} /* ── scroll progress hairline ── */ #progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:120;pointer-events:none} #progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--teal),var(--teal-bright)); box-shadow:0 0 8px rgba(45,212,191,.55)} /* ── buttons ── */ .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:15.5px; padding:14px 26px;border-radius:999px;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s; cursor:pointer;white-space:nowrap;will-change:transform} .btn--lg{padding:17px 32px;font-size:16.5px} .btn--xl{padding:20px 40px;font-size:18px} .btn--nav{padding:10px 20px;font-size:14px} .btn--line{background:var(--line-green);color:#fff;box-shadow:0 10px 28px -8px rgba(6,199,85,.45)} .btn--line:hover{background:#05b64e;box-shadow:0 14px 34px -8px rgba(6,199,85,.55)} .btn--ghost{background:rgba(237,242,240,.08);color:var(--wh);border:1px solid rgba(237,242,240,.28);backdrop-filter:blur(8px)} .btn--ghost:hover{background:rgba(237,242,240,.16);border-color:rgba(237,242,240,.45)} .btn--ink{background:var(--ink-2);color:var(--wh)} .btn--ink:hover{background:var(--ink-3)} .btn--teal{background:var(--teal);color:#fff;box-shadow:0 10px 28px -8px rgba(13,148,136,.45)} .btn--teal:hover{background:#0F766E;box-shadow:0 14px 34px -8px rgba(13,148,136,.55)} /* nowrap above keeps labels on one line where there is room. On a phone it backfires: a label that CANNOT break sets a floor under its whole column. "Try free for 21 days (Thailand)" forced the English plan card to 375px inside a 360px Android, and body{overflow-x:hidden} then shaved 35px off every line in it ("location" -> "locatio"). Thai and Chinese labels are shorter, so this was English-only and invisible unless measured. */ @media(max-width:560px){ .btn{white-space:normal;text-align:center;line-height:1.35} /* Same shape of fault one level down: the price and its unit sit in a flex row that cannot break, so "฿1,900" + "PER LOCATION / MONTH" set a floor of their own. wrap only engages when they genuinely do not fit, so 360px and wider are untouched and a 320px screen drops the unit onto its own line. */ .pcard__price{flex-wrap:wrap} } /* ── ticks list ── */ .ticks{list-style:none;display:grid;gap:14px} .ticks li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.7} .ticks svg{flex-shrink:0;margin-top:5px;color:var(--teal)} /* ════════ REGION CHOOSER (English visitors: Thailand or Taiwan?) ════════ */ #region-modal{position:fixed;inset:0;z-index:200;display:none} #region-modal.is-open{display:flex;align-items:center;justify-content:center} .rgn__backdrop{position:absolute;inset:0;background:rgba(7,12,16,.6);backdrop-filter:blur(4px)} .rgn__card{position:relative;background:var(--paper);border:1px solid var(--bd);border-radius:var(--r-md); padding:36px 30px;max-width:400px;width:calc(100% - 40px);box-shadow:var(--shadow-lg);text-align:center; animation:rgnIn .24s var(--ease)} @keyframes rgnIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}} .rgn__title{font-family:var(--serif);font-size:25px;font-weight:600;color:var(--tx);margin:0 0 8px} .rgn__sub{font-size:15px;line-height:1.6;color:var(--tx-2);margin:0 0 24px} .rgn__btns{display:flex;flex-direction:column;gap:12px} .rgn__opt{display:flex;align-items:center;justify-content:center;gap:11px;padding:15px 18px;border-radius:999px; border:1.5px solid var(--bd);background:#fff;color:var(--tx);font-family:var(--font);font-weight:600;font-size:16.5px; cursor:pointer;transition:border-color .15s,background .15s,transform .1s} .rgn__opt:hover{border-color:var(--teal);background:rgba(13,148,136,.06)} .rgn__opt:active{transform:scale(.98)} .rgn__opt svg{color:var(--line-green)} .rgn__flag{font-size:19px;line-height:1} /* ════════ NAV ════════ */ /* TARANG: the floating glass pill becomes a printed strap running the full width. It rides the masthead's night page transparently, then turns to paper with a hairline the moment it leaves it (.is-solid, set in v9.js). */ #nav{position:fixed;top:0;left:0;right:0;z-index:100; transition:transform .45s var(--ease),opacity .45s var(--ease),background .3s,border-color .3s; border-bottom:1px solid transparent} #nav.is-hidden{transform:translateY(-110%);opacity:0} #nav.is-solid{background:var(--paper);border-bottom-color:var(--hair)} .nav__pill{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);max-width:1240px;margin:0 auto; padding:12px clamp(20px,4vw,48px);background:none;border:0;border-radius:0;box-shadow:none; -webkit-backdrop-filter:none;backdrop-filter:none} .nav__logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:17px;color:var(--onink); letter-spacing:-.02em;margin-right:auto} .nav__logo b{color:var(--teal-bright);font-weight:700} #nav.is-solid .nav__logo{color:var(--tx)} #nav.is-solid .nav__logo b{color:var(--teal)} .nav__links{display:flex;gap:2px} .nav__links a{font-size:13.5px;font-weight:600;color:var(--onink-2);padding:8px 12px;border-radius:0; transition:color .2s,box-shadow .2s} .nav__links a:hover,.nav__links a.is-active{color:var(--onink);background:none; box-shadow:inset 0 -2px 0 var(--teal-bright)} #nav.is-solid .nav__links a{color:var(--tx-3)} #nav.is-solid .nav__links a:hover,#nav.is-solid .nav__links a.is-active{color:var(--tx); box-shadow:inset 0 -2px 0 var(--teal)} .nav__right{display:flex;align-items:center;gap:10px} /* the language switcher is a picker, so it is choice chips, never stamps */ .lang{display:flex;gap:4px;background:none;border:0;border-radius:0;padding:0}.lang button, .lang a{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em; color:var(--onink-3);padding:5px 9px;border:1.5px solid rgba(237,242,240,.22);border-radius:var(--r); transition:color .2s,border-color .2s,box-shadow .2s;cursor:pointer;background:transparent}.lang button:hover, .lang a:hover{color:var(--onink);border-color:rgba(237,242,240,.5)}.lang button.is-on, .lang a.is-on{background:transparent;color:var(--onink);border-color:var(--onink); box-shadow:inset 0 0 0 1px var(--onink)}#nav.is-solid .lang button, #nav.is-solid .lang a{color:var(--tx-3);border-color:var(--hair)}#nav.is-solid .lang button:hover, #nav.is-solid .lang a:hover{color:var(--tx);border-color:var(--tx-3)}#nav.is-solid .lang button.is-on, #nav.is-solid .lang a.is-on{color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .nav__ham{display:none;width:40px;height:40px;position:relative;border-radius:0} .nav__ham i{position:absolute;left:11px;right:11px;height:2px;background:var(--onink);transition:all .3s var(--ease)} #nav.is-solid .nav__ham i{background:var(--tx)} .nav__ham i:first-child{top:16px}.nav__ham i:last-child{top:23px} .nav__ham.is-x i:first-child{top:19px;transform:rotate(45deg)} .nav__ham.is-x i:last-child{top:19px;transform:rotate(-45deg)} /* the mobile panel is a paper sheet of ruled rows */ .nav__panel{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper); border-top:2px solid var(--rule);border-bottom:1px solid var(--hair);border-radius:0; padding:8px clamp(20px,4vw,48px) 18px;flex-direction:column;gap:0;box-shadow:var(--shadow-md); -webkit-backdrop-filter:none;backdrop-filter:none} .nav__panel.is-open{display:flex} .nav__panel a{color:var(--tx);font-size:16px;font-weight:600;padding:15px 2px;border-radius:0; border-bottom:1px solid var(--hair)} .nav__panel a:hover{background:none;color:var(--teal-deep)} .nav__panel .tg-btn{justify-content:center;margin-top:14px;border-bottom:0} .nav__panel .tg-btn:hover{color:#fff} /* ════════ HERO — the Tarang masthead ════════ A newspaper front page printed at night. The full-bleed photo, the scrim and the aurora are gone: the picture is now a captioned FIGURE inside the page, which is what lets the type and the rules carry the drama instead of a photo. Class names for the line-rise (.hero__title/.hero__l/.hero--in) are unchanged on purpose — v9.js and the reduced-motion block both bind to them. */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden; background:var(--paper)} .hero__content{position:relative;z-index:5;max-width:1240px;margin:0 auto;width:100%; padding:clamp(112px,15vh,150px) clamp(20px,4vw,48px) clamp(70px,9vh,110px)} /* the rubric row — 3px page rule, rubric left, live meta right */ .hero__rubric{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap; border-top:3px solid var(--rule);padding-top:12px} .hero__eyebrow{display:flex;align-items:center;gap:9px;margin:0;min-width:0} .hero__live{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .hero__live-sep{width:22px;height:1px;background:var(--hair);display:inline-block} .live-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex:none; animation:pulse 2.4s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* the headline — the biggest thing on the site */ .hero__title{font-size:clamp(46px,9.4vw,118px);font-weight:700;line-height:.98;color:var(--tx); letter-spacing:-.045em;margin:clamp(26px,4vw,50px) 0 clamp(28px,3.6vw,46px)} .hero__title em{font-style:normal;color:var(--teal)} .hero__l{display:block;overflow:hidden;padding-bottom:.02em} html.js .hero__l>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease)} html.js .hero--in .hero__l>span{transform:none} html.js .hero--in .hero__l:nth-child(2)>span{transition-delay:.12s} /* Thai and Chinese need headroom or the mask clips tone marks and the tighter tracking collides the glyphs. Latin-only settings are not safe here. */ body[data-lang="th"] .hero__title, body[data-lang="zh"] .hero__title{line-height:1.22;letter-spacing:-.02em} /* the four systems, as a ruled strip */ .hero__four{list-style:none;margin:0 0 clamp(30px,3.8vw,46px);padding:0; border-top-color:var(--rule)} .hero__four li{font-size:15px;font-weight:600;color:var(--tx); border-bottom-color:var(--hair);border-right-color:var(--hair);padding:16px 18px} .hero__four .tg-cols__n{color:var(--tx-4)} .hero__four-tail{font-weight:500;color:var(--tx-2)} .hero__four-tail .tg-cols__n{color:var(--teal)} /* the body: lede column + the figure plate */ .hero__body{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(26px,4vw,56px);align-items:start} .hero__sub{max-width:54ch;font-size:clamp(15.5px,1.5vw,17.5px);color:var(--tx-2); margin-bottom:32px;text-wrap:pretty;line-height:1.78} .hero__ctas{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px} .hero__trust{color:var(--tx-3)} .hero__plate{margin:0} .hero__media{position:relative;overflow:hidden} /* the JS cinemagraph is absolute inside this */ .hero__media img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover;object-position:center 30%} html.js .hero__media{transform:scale(1.04)} .hero__cred{margin-top:clamp(30px,3.6vw,46px);padding-top:14px; border-top:1px solid var(--hair);color:var(--tx-3)} .hero__cred em{font-style:normal;color:var(--teal)} .hero__scrollcue{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:5; display:flex;flex-direction:column;align-items:center;gap:10px} .hero__scrollcue .mono{font-size:9.5px;color:var(--tx-4);letter-spacing:.3em} .hero__scrollcue i{width:1px;height:40px;background:var(--hair);position:relative;overflow:hidden} .hero__scrollcue i::after{content:"";position:absolute;left:0;top:-50%;width:100%;height:50%;background:var(--teal); animation:scrollcue 2s var(--ease-io) infinite} @keyframes scrollcue{0%{top:-50%}70%,100%{top:110%}} @media(max-width:900px){ .hero{min-height:0} .hero__body{grid-template-columns:1fr;gap:30px} .hero__rubric{gap:12px} .hero__scrollcue{display:none} } /* STORY (chaos -> order) removed 2026-08-18 - section, script and styles together. Nothing else on the site used those classes; checked across all 27 pages before deleting. */ /* ════════ MANIFESTO ════════ */ .manifesto{position:relative;background:var(--paper);padding:clamp(110px,16vh,190px) 0;overflow:hidden} .manifesto__ghost{position:absolute;right:-2vw;top:4vh;font-size:clamp(200px,30vw,430px);font-weight:500; color:rgba(15,23,42,.035);line-height:1;user-select:none;letter-spacing:-.05em} .manifesto .wrap{position:relative} .manifesto__h{font-size:clamp(34px,5vw,62px);font-weight:600;line-height:1.4;letter-spacing:-.005em;max-width:840px;margin-bottom:54px} .manifesto__h em{font-style:italic;color:var(--teal)} .manifesto__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px);max-width:960px;margin-bottom:70px} .manifesto__cols p{font-size:16.5px;color:var(--tx-2);text-wrap:pretty} .manifesto__punch{font-size:clamp(24px,3vw,36px);font-weight:600;font-style:italic;color:var(--tx); border-left:3px solid var(--teal);padding:.12em 0 .12em 26px;line-height:1.65;max-width:700px} /* ════════ PRODUCT (pinned triptych) ════════ */ .product{position:relative;background:var(--ink);color:var(--wh)} html.js .product{height:380vh} .product__sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center} .product .aurora{opacity:.5} .product__rail{position:absolute;left:clamp(16px,3vw,40px);top:50%;transform:translateY(-50%);z-index:6; display:flex;flex-direction:column;gap:22px;font-size:11px;color:var(--wh-3)} .product__rail span{transition:color .3s} .product__rail span.is-on{color:var(--teal-bright)} .product__railline{position:absolute;left:-12px;top:4px;bottom:4px;width:1px;background:rgba(237,242,240,.12)} .product__railline b{position:absolute;top:0;left:0;width:100%;height:0;background:var(--teal-bright)} .product__grid{position:relative;z-index:5;max-width:1200px;margin:0 auto;width:100%; padding:0 clamp(20px,4vw,48px);display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,80px);align-items:center} .product__copy{position:relative;min-height:420px} .pscene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; opacity:0;transform:translateY(34px);pointer-events:none; transition:opacity .55s var(--ease),transform .55s var(--ease)} .pscene.is-on{opacity:1;transform:none;pointer-events:auto} .pscene h2{font-size:clamp(30px,3.6vw,46px);font-weight:700;line-height:1.32;letter-spacing:-.01em;margin-bottom:28px;color:#fff} .pscene h2 em{font-style:normal;color:var(--teal-bright)} .pscene .ticks li{color:var(--wh-2)} .pscene .ticks svg{color:var(--teal-bright)} .product__phone{display:flex;justify-content:center;perspective:1200px} .product__phoneinner{position:relative;width:clamp(300px,36vw,470px);aspect-ratio:3/4; transform-style:preserve-3d;will-change:transform;transition:transform .35s var(--ease)} .product__phoneinner img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain; opacity:0;transform:scale(.96) rotate(2deg);transition:opacity .6s var(--ease),transform .6s var(--ease); filter:drop-shadow(0 40px 60px rgba(0,0,0,.55))} .product__phoneinner img.is-on{opacity:1;transform:none} .product__glow{position:absolute;inset:8% -18%;background:radial-gradient(50% 42% at 50% 55%,rgba(13,148,136,.34),transparent 70%); z-index:-1;filter:blur(10px)} /* product scroll cue (same look as the hero's) */ .product__cue{transition:opacity .5s var(--ease)} .product__cue.is-end{opacity:0} /* product static fallback */ .product--static{height:auto!important} .product--static .product__cue{display:none} .product--static .product__sticky{position:static;height:auto;padding:100px 0} .product--static .product__rail{display:none} .product--static .product__grid{grid-template-columns:1fr;gap:70px} .product--static .product__copy{min-height:0;display:grid;gap:86px} .product--static .pscene{position:static;opacity:1;transform:none;pointer-events:auto} .product--static .product__phone{display:none} .pscene__img{position:static!important;width:min(230px,62vw);margin:34px auto 0} /* no-JS / reduced-motion: phones just shown (no reveal) */ html:not(.js) .pscene__img{opacity:1;transform:none} /* mobile: each phone shot animates in as it scrolls into view (phone-native, no scroll-jack). !important needed to beat the base .product__phoneinner img.is-on{opacity:1} rule. */ html.js .product--static .pscene__img{opacity:0!important;transform:translateY(38px) scale(.94)!important; transition:opacity .7s var(--ease),transform .8s var(--ease)!important;will-change:transform,opacity} html.js .product--static .pscene__img.is-in{opacity:1!important;transform:none!important} /* ════════ PROOF ════════ */ .proof{position:relative;background:var(--ink-2);color:var(--wh);padding:clamp(110px,16vh,190px) 0;overflow:hidden} .proof__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5} html.js .proof__bg{transform:scale(1.12)} .proof__scrim{position:absolute;inset:0;background:linear-gradient(180deg,var(--ink-2) 0%,rgba(11,20,24,.4) 40%,rgba(11,20,24,.55) 70%,var(--ink-2) 100%)} .proof .wrap{position:relative;z-index:3} .proof__h{font-size:clamp(32px,4.6vw,58px);font-weight:600;line-height:1.42;margin-bottom:64px} .proof__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);margin-bottom:54px} .stat b{display:flex;align-items:baseline;font-size:clamp(52px,6.6vw,104px);font-weight:700;line-height:1; letter-spacing:-.03em;color:#fff;margin-bottom:12px} .stat b i{font-style:normal} .stat b em{font-style:normal;color:var(--teal-bright);font-size:.62em;margin-left:2px} .stat .mono{display:block;font-size:11px;color:var(--wh-2);text-transform:uppercase;line-height:1.7;letter-spacing:.16em} .proof__note{font-size:16.5px;color:var(--wh-2);max-width:52ch} /* ════════ BENTO ════════ */ .bento{background:var(--paper);padding:clamp(110px,15vh,180px) 0} .bento__h{font-size:clamp(32px,4.4vw,54px);font-weight:700;line-height:1.32;letter-spacing:-.012em;margin-bottom:56px} .bento__h em{font-style:normal;color:var(--teal)} .bento__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:215px;gap:18px} .bcard{position:relative;background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);overflow:hidden; display:flex;flex-direction:column;box-shadow:var(--shadow-sm); transition:transform .45s var(--ease),box-shadow .45s var(--ease);will-change:transform} .bcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .bcard--lg{grid-column:span 2;grid-row:span 2} .bcard--tall{grid-row:span 2} .bcard--wide{grid-column:span 2} .bcard__body{padding:26px 26px 18px;position:relative;z-index:2} .bcard h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px} .bcard p{font-size:14.5px;line-height:1.7;color:var(--tx-2);text-wrap:pretty} .bcard>img{flex:1;object-fit:cover;object-position:center top;min-height:0;width:100%; transition:transform .6s var(--ease)} .bcard:hover>img{transform:scale(1.035)} .bcard--wide>img{object-position:center 42%} .bcard--tall>img{object-position:center 28%} /* the reminders card is a LINE chat screenshot, not a portrait — centre the bubble */ .bcard--tall:nth-child(2)>img{object-position:center center} .bcard__browser{flex:1;min-height:0;margin:4px 22px 22px;border-radius:14px;overflow:hidden; border:1px solid var(--bd);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;background:#fff} .bcard__browserbar{display:flex;align-items:center;gap:6px;padding:9px 14px;background:var(--paper-2);border-bottom:1px solid var(--bd)} .bcard__browserbar i{width:9px;height:9px;border-radius:50%;background:#D9D6CC} .bcard__browserbar .mono{margin-left:10px;font-size:9.5px;color:var(--tx-3);letter-spacing:.08em} .bcard__browser img{flex:1;object-fit:cover;object-position:center top;min-height:0;width:100%} .bcard--stat .bcard__body{display:flex;flex-direction:column;justify-content:flex-end;height:100%} .bcard__big{font-size:26px;letter-spacing:.1em;color:var(--teal);margin-bottom:auto;padding-top:6px} .bcard__radar{position:relative;width:64px;height:64px;margin-bottom:auto;display:flex;align-items:center;justify-content:center} .bcard__radar i{position:absolute;inset:0;border:1.5px solid rgba(13,148,136,.35);border-radius:50%;animation:radar 3s var(--ease-io) infinite} .bcard__radar i:nth-child(2){animation-delay:1s} .bcard__radar i:nth-child(3){animation-delay:2s} @keyframes radar{0%{transform:scale(.4);opacity:0}30%{opacity:1}100%{transform:scale(1.25);opacity:0}} /* ════════ INDUSTRIES ════════ */ .inds{background:var(--paper);padding:0 0 clamp(110px,15vh,180px);overflow:hidden} .inds__track{display:flex;width:max-content;margin-top:34px} html.js .inds__track{animation:marquee 46s linear infinite} .inds__track:hover{animation-play-state:paused} @keyframes marquee{to{transform:translateX(-50%)}} .inds__set{display:flex;gap:18px;padding-right:18px} .icard{position:relative;width:min(300px,72vw);aspect-ratio:3/4;border-radius:var(--r-md);overflow:hidden;flex-shrink:0} .icard img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .icard:hover img{transform:scale(1.06)} .icard figcaption{position:absolute;inset:auto 0 0;padding:44px 20px 18px;display:flex;align-items:flex-end;gap:8px; background:linear-gradient(180deg,transparent,rgba(7,12,16,.78));color:#fff} .icard figcaption b{font-size:19px;font-weight:700} .icard figcaption .mono{margin-left:auto;font-size:10px;color:rgba(255,255,255,.55)} /* ════════ TRUST ════════ */ .trust{background:var(--paper-2);padding:clamp(110px,16vh,190px) 0;text-align:center} .trust__rule{width:44px;height:3px;background:var(--teal);border-radius:2px;margin:0 auto 34px} .trust__q{font-size:clamp(26px,3.8vw,46px);font-weight:600;line-height:1.55;max-width:880px;margin:0 auto 26px} .trust__q em{font-style:italic;color:var(--teal)} .trust__sub{font-size:17px;color:var(--tx-2);max-width:52ch;margin:0 auto 34px} .trust__sig{font-size:11px;color:var(--tx-3);text-transform:uppercase} /* ════════ PLAN ════════ */ .plan{background:var(--paper);padding:clamp(110px,15vh,180px) 0} .plan__h{font-size:clamp(32px,4.4vw,54px);font-weight:700;line-height:1.3;text-align:center;letter-spacing:-.012em;margin-bottom:14px} .plan__h em{font-style:normal;color:var(--teal)} .plan__sub{text-align:center;color:var(--tx-2);max-width:60ch;margin:0 auto 56px} .plan__cards{display:grid;grid-template-columns:1.05fr .95fr;gap:20px;max-width:940px;margin:0 auto} .pcard{background:#fff;border:1px solid var(--bd);border-radius:var(--r-lg);padding:36px;display:flex;flex-direction:column;gap:18px; box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} .pcard--hot{border-top:3px solid var(--teal);position:relative} .pcard__tag{font-size:10.5px;color:var(--teal);text-transform:uppercase} .pcard h3{font-size:24px;font-weight:700;letter-spacing:-.01em} .pcard__price{display:flex;align-items:baseline;gap:10px} .pcard__price b{font-size:56px;font-weight:700;letter-spacing:-.03em;line-height:1} .pcard__price .mono{font-size:11px;color:var(--tx-3)} .pcard__body{font-size:15.5px;color:var(--tx-2);line-height:1.75} .pcard .btn{margin-top:auto;justify-content:center} .pcard__more{margin-top:12px;text-align:center;font-size:14px} .pcard__more a{color:var(--tx-3);text-decoration:underline;text-underline-offset:3px} .pcard__more a:hover{color:var(--teal)} .pcard .ticks li{font-size:14.5px} /* ════════ FAQ ════════ */ .faq{background:var(--paper);padding:0 0 clamp(110px,15vh,180px)} .faq__h{font-size:clamp(28px,3.6vw,44px);font-weight:700;text-align:center;letter-spacing:-.01em;margin-bottom:44px} .faq__list{display:grid;gap:12px} .faq__item{background:#fff;border:1px solid var(--bd);border-radius:var(--r-sm);overflow:hidden; transition:box-shadow .3s var(--ease)} .faq__item[open]{box-shadow:var(--shadow-sm)} .faq__item summary{display:flex;align-items:center;gap:14px;list-style:none;cursor:pointer; padding:19px 22px;font-size:16.5px;font-weight:600} .faq__item summary::-webkit-details-marker{display:none} .faq__item summary svg{margin-left:auto;flex-shrink:0;color:var(--tx-3);transition:transform .3s var(--ease)} .faq__item[open] summary svg{transform:rotate(180deg);color:var(--teal)} .faq__body{padding:0 22px 20px;font-size:15.5px;color:var(--tx-2);line-height:1.8;max-width:64ch} .faq__body a{color:var(--teal);font-weight:600} /* ════════ FINALE + FOOTER ════════ */ .finale{position:relative;background:var(--ink);color:var(--wh);overflow:hidden; padding:clamp(120px,18vh,220px) 0 0;text-align:center} .finale__bg{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1400px,120%);height:auto; opacity:.22;filter:blur(2px);pointer-events:none} .finale .aurora{opacity:.45} .finale .wrap{position:relative;z-index:4} .finale .kicker{color:var(--wh-3);text-align:center} .finale__h{font-size:clamp(40px,7vw,92px);font-weight:700;line-height:1.18;letter-spacing:-.015em;color:#fff;margin-bottom:44px} .finale__h em{font-style:normal;color:var(--teal-bright)} .finale__ctas{display:flex;align-items:center;justify-content:center;margin-bottom:30px} .finale__trust{font-size:11px;color:var(--wh-3);text-transform:uppercase;margin-bottom:clamp(90px,12vh,140px)} .footer{position:relative;z-index:4;border-top:1px solid var(--bd-ink);padding:64px 0 40px;text-align:left; background:rgba(7,12,16,.55);backdrop-filter:blur(6px)} .footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:44px;margin-bottom:54px} .footer__logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:#fff;margin-bottom:14px} .footer__logo b{color:var(--teal-bright)} .footer__tag{font-size:14.5px;color:var(--wh-2);max-width:34ch;line-height:1.75} .footer__social{display:flex;gap:16px;margin-top:20px} .footer__social a{color:var(--wh-3);transition:color .2s} .footer__social a:hover{color:var(--teal-bright)} .footer h4{font-size:10.5px;color:var(--wh-3);text-transform:uppercase;margin-bottom:18px} .footer ul{list-style:none;display:grid;gap:11px} .footer ul a{font-size:14.5px;color:var(--wh-2);transition:color .2s} .footer ul a:hover{color:#fff} .footer__bottom{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap; border-top:1px solid var(--bd-ink);padding-top:26px;font-size:10px;color:var(--wh-3);text-transform:uppercase} /* ════════ RESPONSIVE ════════ */ @media (max-width:1080px){ .nav__links{display:none} .bento__grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px} .bcard--lg{grid-column:span 2;grid-row:span 2} .product__rail{display:none} } @media (max-width:820px){ body{font-size:16px} .nav__pill{width:100%;justify-content:space-between;gap:10px} /* .btn--nav was the old class on the nav CTA; the Tarang strap renames it to .tg-btn--sm. Both are listed so the rule cannot silently stop matching - it did exactly that once, and the CTA ran off the right edge on a phone. */ .btn--nav,.nav__right .tg-btn{display:none} .nav__ham{display:block} .hero{align-items:flex-end} .hero__content{padding-top:120px;padding-bottom:110px} .hero__title{font-size:clamp(42px,11.5vw,64px)} .hero__meta{display:none} .hero__ctas .btn{width:100%;justify-content:center} .hero__trust{font-size:10.5px;line-height:2} .manifesto__cols{grid-template-columns:1fr;gap:22px} .product__grid{grid-template-columns:1fr} /* pinned product on mobile: phone on top, cross-fading copy below, both fit one sticky screen. Keep .pscene absolutely stacked (the cross-fade depends on it) — only lay out the grid. */ html.js .product:not(.product--static) .product__grid{display:flex;flex-direction:column; justify-content:center;align-items:center;gap:14px;height:100%;padding:52px 16px 18px} html.js .product:not(.product--static) .product__phone{order:1;flex:0 0 auto} html.js .product:not(.product--static) .product__phoneinner{width:min(74vw,290px)} html.js .product:not(.product--static) .product__copy{order:2;width:100%;max-width:440px;min-height:200px} /* pscene stays absolute+cross-fading; center its text on mobile. Faster fade = crisper swap, less ghost. */ html.js .product:not(.product--static) .pscene{text-align:center;justify-content:flex-start; transition:opacity .28s var(--ease),transform .28s var(--ease)} html.js .product:not(.product--static) .pscene:not(.is-on){opacity:0} html.js .product:not(.product--static) .pscene .product__eyebrow, html.js .product:not(.product--static) .pscene .kicker{margin-bottom:6px} html.js .product:not(.product--static) .pscene h2{font-size:clamp(19px,5vw,24px);line-height:1.25;margin-bottom:12px} html.js .product:not(.product--static) .pscene .ticks{text-align:left;max-width:330px;margin:0 auto;gap:7px;display:flex;flex-direction:column} html.js .product:not(.product--static) .pscene .ticks li{font-size:13px;line-height:1.45} html.js .product:not(.product--static) .product__rail{left:10px} html.js .product:not(.product--static) .product__cue{display:none} .proof__stats{grid-template-columns:repeat(2,1fr);gap:34px 20px} .plan__cards{grid-template-columns:1fr} .bento__grid{grid-template-columns:1fr;grid-auto-rows:auto} .bcard{min-height:200px} .bcard--lg,.bcard--wide,.bcard--tall{grid-column:auto;grid-row:auto} .bcard>img{max-height:300px} .bcard--tall>img{max-height:380px} .footer__grid{grid-template-columns:1fr;gap:34px} .finale__ctas{flex-direction:column;gap:26px} .finale__trust{font-size:10px;letter-spacing:.08em;line-height:2;padding:0 10px} #grain{display:none} } /* ════════ PROOF SCENE (pinned count-up) + cube-wall video ════════ */ .proof__sticky{position:relative} html.js .proof{height:300vh;padding:0;overflow:visible} html.js .proof__sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden} html.js .proof__sticky .wrap{width:100%} .proof__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease} .proof__vid.is-on{opacity:.6} .finale__vid{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1400px,120%);height:auto; filter:blur(2px);pointer-events:none;opacity:0;transition:opacity 1.4s ease} .finale__vid.is-on{opacity:.3} /* ════════ BENTO LIFE ════════ */ .bento__grid{perspective:1300px} .bcard{transform:translateY(var(--lift,0)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} .bcard:hover{--lift:-5px;transform:translateY(var(--lift)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))} .bcard::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none; background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.32) 50%,transparent 58%); transform:translateX(-135%) skewX(-6deg)} .bcard:hover::after{transform:translateX(135%) skewX(-6deg);transition:transform .95s var(--ease)} .bcard__browserbar i:nth-child(1){background:#E8A9A0} .bcard__browserbar i:nth-child(2){background:#E6D3A3} .bcard__browserbar i:nth-child(3){background:#A9CDB8} /* ════════ REDUCED MOTION ════════ */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} html.js .rv{opacity:1;transform:none;filter:none;transition:none} html.js .hero__l>span{transform:none;transition:none} html.js #grain{animation:none} html.js .inds__track{animation:none;overflow-x:auto} .live-dot,.hero__scrollcue i::after,.bcard__radar i{animation:none} #loader{display:none} .btn,.bcard,.pcard,.icard img{transition:none} .bcard::after{display:none} html.js .proof{height:auto;padding:clamp(110px,16vh,190px) 0} html.js .proof__sticky{position:static;height:auto;display:block;overflow:visible} } /* ── Pricing: market-specific card sets by language (TH offer / TW offer / EN both) ── */ .plan-set{display:none} body[data-lang="th"] .plan-set--th{display:block} body[data-lang="zh"] .plan-set--zh{display:block} body[data-lang="en"] .plan-set--en{display:block} /* EN shows both markets: a labelled group (Thailand / Taiwan), each = a 2-card row */ .plan-en-group{max-width:940px;margin:0 auto 40px} .plan-en-group:last-child{margin-bottom:0} .plan-en-group__label{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.14em; text-transform:uppercase;color:var(--teal);margin-bottom:16px;font-weight:600} .plan-en-group__label::after{content:"";flex:1;height:1px;background:var(--bd)} /* ═════ ACT 4.6 · FOUR SYSTEMS, ONE SET OF NUMBERS ═════ Sits between the product triptych and the proof band. Deliberately a PAPER-2 section rather than another white one, so it reads as a beat of its own instead of more feature cards - the point it makes is structural ("these are the same rows"), not another feature. */ .four{background:var(--paper-2);padding:clamp(96px,13vh,150px) 0} .four__h{font-size:clamp(32px,4.4vw,54px);font-weight:700;line-height:1.32;letter-spacing:-.012em;margin-bottom:20px} .four__h em{font-style:normal;color:var(--teal)} .four__lead{max-width:62ch;font-size:clamp(16px,1.5vw,19px);line-height:1.72;color:var(--tx-2);margin-bottom:48px} .four__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;counter-reset:none} .fcard{background:#fff;border:1px solid var(--bd);border-radius:var(--r-md);padding:26px 24px 24px; box-shadow:var(--shadow-sm);transition:transform .45s var(--ease),box-shadow .45s var(--ease)} .fcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)} .fcard__n{display:block;font-size:11px;color:var(--teal);margin-bottom:14px;letter-spacing:.04em} .fcard h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:7px} .fcard p{font-size:14.5px;line-height:1.62;color:var(--tx-2)} /* the line that carries the whole section: the office, not just the manager */ .four__office{margin-top:44px;max-width:74ch;font-size:clamp(16px,1.6vw,20px);line-height:1.7;color:var(--tx)} .four__office b{font-weight:700} @media(max-width:900px){ .four__grid{grid-template-columns:repeat(2,1fr)} } @media(max-width:560px){ .four__grid{grid-template-columns:1fr;gap:14px} .fcard{padding:22px 20px 20px} } /* Three plan cards on the homepage (Standard · Own OA · Chain). The grid was built for two, so widen it and let own OA sit in the middle as the one we recommend - same order and same emphasis as the pricing page, so a reader who scrolls the homepage and then opens pricing.html sees one story. */ .plan__cards--three{grid-template-columns:repeat(3,1fr);max-width:1140px} .pcard--rec{border-top:3px solid var(--teal);position:relative} .pcard__rec{position:absolute;top:-11px;left:50%;transform:translateX(-50%); background:var(--teal);color:#fff;font-size:10px;letter-spacing:.06em; text-transform:uppercase;padding:4px 12px;border-radius:999px;white-space:nowrap} @media(max-width:980px){ .plan__cards--three{grid-template-columns:1fr;max-width:560px} } /* Hero: the four systems as a visible strip, not a whisper. It was only in .hero__eyebrow (11.5px, 68% opacity) under a 108px headline, which is the same as not saying it. It sits between the headline and the sub-line, where the eye already travels. TARANG: the glass pills became a ruled strip. Layout is now in the .hero__four block up in the HERO section (it reads tg-cols); this block only carries the small-screen behaviour, where five ruled cells must become a stacked list. */ @media(max-width:560px){ .hero__four{margin-bottom:24px} .hero__four li{font-size:14px;padding:12px 14px} .hero__four .tg-cols__n{display:inline-block;margin:0 10px 0 0} .hero__four .hero__four-tail{white-space:normal} } /* Homepage own-OA card: the quiet second route for someone already sold. */ .pcard__second{margin-top:-8px;text-align:center} .pcard__second a{font-size:12.5px;color:var(--tx-3);text-decoration:underline;text-underline-offset:3px} .pcard__second a:hover{color:var(--teal)} /* ════════════════════════════════════════════════════════════════ TARANG STRUCTURAL PASS (v9.0, 2026-08-07) The repaint in tarang.css flattens the cards. This block is the part a colour swap cannot express: the boxes stop being boxes and become a ruled ledger. Gapless grids, hairlines carrying every division, an ink rule opening each group. Nothing here changes a word of copy. Appended LAST so it wins over the section blocks above on equal specificity. ════════════════════════════════════════════════════════════════ */ /* ── section openers: the 2px ink rule + mono rubric, drawn on arrival ── */ .bento__h,.four__h,.plan__h,.faq__h,.trust__q,.manifesto__h{letter-spacing:-.03em} .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;font-weight:600; color:var(--tx-3);text-transform:uppercase;margin-bottom:0} .kicker--teal{color:var(--teal)} /* ── BENTO → the ledger ────────────────────────────────────────── Was: 4 columns of 28px-radius white cards floating on cream with an 18px gap and a hover lift. Now: one continuous ruled table. The grid geometry (spans, 215px rows) is deliberately untouched, so the editorial rhythm Dan approved survives; only the boxes go. */ .bento__grid{gap:0;border-top:2px solid var(--rule);border-left:1px solid var(--hair);perspective:none} .bcard{background:none;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair); box-shadow:none;border-radius:0;transition:background .3s var(--ease)} .bcard:hover{background:rgba(15,17,21,.018)} .bcard:hover>img{transform:none} .bcard__body{padding:22px 22px 18px} .bcard h3{font-size:18px;font-weight:700;letter-spacing:-.015em;margin-bottom:7px} .bcard p{font-size:14px;line-height:1.68;color:var(--tx-2)} /* A picture fills its ledger cell edge to edge: the CELL's hairline is the plate frame, so an inset border would draw a second one. Insetting it also stole height from the flex track and squashed the wide cards to a 66px sliver - caught in a real browser, invisible in the CSS. */ .bcard>img{flex:1;min-height:0;border:0;margin:0;width:100%} .bcard__browser{margin:0 22px 22px;border-radius:0;border:1px solid var(--hair);box-shadow:none;background:var(--paper)} .bcard__browserbar{background:var(--paper-2);border-bottom:1px solid var(--hair);padding:8px 12px} .bcard__browserbar i{width:7px;height:7px;border-radius:0;background:var(--hair)} .bcard__browserbar i:nth-child(1),.bcard__browserbar i:nth-child(2),.bcard__browserbar i:nth-child(3){background:var(--hair)} .bcard__browserbar .mono{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--tx-3)} /* the two big-mono cells (CSV · PDF, YOUR BRAND) are already Tarang - reset them */ .bcard__big{font-family:var(--mono);font-size:22px;font-weight:600;letter-spacing:.14em;color:var(--teal)} /* the radar ping becomes the app's own live seal */ .bcard__radar{width:auto;height:auto;margin-bottom:auto;justify-content:flex-start} .bcard__radar i{position:static;inset:auto;width:10px;height:10px;border:1.5px solid #22C55E; background:#22C55E;border-radius:2px;animation:tg-seal-pulse 2s ease-in-out infinite} .bcard__radar i:nth-child(2),.bcard__radar i:nth-child(3){display:none} /* ── FOUR SYSTEMS → the ledger ── */ .four__grid{gap:0;border-top:2px solid var(--rule);border-left:1px solid var(--hair)} .fcard{background:none;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair); border-radius:0;box-shadow:none;padding:22px 22px 24px;transition:background .3s var(--ease)} .fcard:hover{background:rgba(15,17,21,.018);transform:none;box-shadow:none} .fcard__n{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em; color:var(--tx-4);margin-bottom:14px;font-variant-numeric:tabular-nums} .fcard h3{font-size:18px;letter-spacing:-.015em} .four__office{border-top:1px solid var(--hair);padding-top:26px} /* ── PLAN → three ruled columns ────────────────────────────────── Never three cards side by side. One table with two hairlines in it. */ .plan__cards,.plan__cards--three{gap:0;border-top:2px solid var(--rule);border-left:1px solid var(--hair)} .pcard{background:none;border:0;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair); border-radius:0;box-shadow:none;padding:30px 26px 28px} .pcard:hover{transform:none;box-shadow:none} /* the recommended column carries an ink top edge and a stamp ON the rule */ .pcard--rec,.pcard--hot{border-top:3px solid var(--ink);margin-top:-2px;background:rgba(15,17,21,.02)} .pcard__rec{position:absolute;top:-1px;left:0;transform:none;background:var(--ink);color:var(--paper); font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:0;white-space:nowrap} .pcard__price{font-family:var(--font);font-weight:700;letter-spacing:-.04em; font-variant-numeric:tabular-nums;color:var(--ink)} .pcard__tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;border:1.5px solid var(--hair);color:var(--tx-3); background:none;padding:3px 7px;border-radius:0} .plan-en-group__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--tx-3)} .plan-en-group__label::after{background:var(--hair)} /* ── FAQ → ruled rows ── */ .faq__list{border-top:2px solid var(--rule)} .faq__item{background:none;border:0;border-bottom:1px solid var(--hair);border-radius:0;box-shadow:none} .faq__item[open]{box-shadow:inset 3px 0 0 var(--ink);background:rgba(15,17,21,.015)} .faq__h{font-size:16.5px;font-weight:600;letter-spacing:-.01em;padding:20px 18px 20px 2px} .faq__item[open] .faq__h{padding-left:16px} .faq__body{padding-left:2px} .faq__item[open] .faq__body{padding-left:16px} /* ── INDUSTRIES → plates on a filmstrip ── */ .icard{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible} .icard img{border:1px solid var(--hair);border-radius:0;display:block;width:100%} .icard figcaption,.icard span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--tx-3);background:none;padding:9px 0 0;position:static; text-shadow:none;display:block} html.js .inds__track{animation-duration:70s} /* ── TRUST → the quote, set as display type over an ink rule ── */ .trust__rule{background:var(--rule);height:3px;width:64px;border-radius:0} .trust__q{font-family:var(--font);font-weight:600} .trust__sig{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx-3)} /* ── MANIFESTO → the ghost numeral becomes print register ── */ .manifesto__ghost{font-family:var(--mono);font-weight:700;color:transparent; -webkit-text-stroke:1.5px var(--hair);opacity:1} /* Reads the section's own counter instead of a hand-typed numeral. z-index is load-bearing now that the element sits after .wrap in the DOM: both are positioned, so without it the numeral would paint OVER the copy. */ .manifesto__ghost::before{content:counter(sec,decimal-leading-zero)} .manifesto__ghost{z-index:0} .manifesto .wrap{z-index:1} .manifesto__punch{border-left:3px solid var(--rule);padding-left:22px;border-radius:0} /* ── PROOF → the numbers, set as figures on a drawn grid ── */ .proof__stats .stat{background:none;border:0;box-shadow:none;border-radius:0} .proof__stats{border-top:2px solid var(--rule);border-left:1px solid var(--hair);gap:0} .proof__stats > *{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:24px 22px} .proof__note{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase} /* ── FOOTER → the colophon ── */ .footer__grid{border-top:2px solid var(--rule);padding-top:0;gap:0} .footer__grid > *{border-right:1px solid var(--hair);padding:24px 22px 24px 0} .footer__grid > *:last-child{border-right:0} .footer__grid h4{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--tx-3);margin-bottom:14px} .footer__bottom{border-top:3px solid var(--rule);font-family:var(--mono);font-size:10.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3)} .footer__tag{font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase} /* ── LINE MENU figures → plates ── */ .lmcard img{border-radius:0;border:1px solid var(--hair);box-shadow:none} .lmcard figcaption{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--tx-3)} /* ── HERITAGE → a night page with a ruled timeline ── */ .heritage{background:var(--paper-2)} .heritage__timeline{font-family:var(--mono);letter-spacing:.14em;color:var(--tx-3)} .heritage__timeline i{height:2px;background:var(--rule);width:40px} .heritage__h{font-weight:600;letter-spacing:-.025em} /* ── the region sheet ── */ .rgn__card{border-radius:var(--r-sheet) var(--r-sheet) 0 0;border-top:3px solid var(--rule); -webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)} .rgn__opt{border-radius:var(--r)} @media(max-width:900px){ .bento__grid,.four__grid,.plan__cards,.plan__cards--three{border-left:0} .bcard,.fcard,.pcard{border-right:0} .proof__stats{border-left:0} .proof__stats > *{border-right:0} .footer__grid > *{border-right:0;padding-right:0} } /* ════════════════════════════════════════════════════════════════ TARANG · v9.1 (2026-08-08) — Dan's review 1. No dark hero, and no alternating dark/light bands. The page is paper from masthead to colophon; `html.dark` flips ALL of it (see tarang.css). 2. The app's ruled section opener between every section, so the site and the product read as one room. The rule is drawn on a ::before rather than as a border so it can animate itself across, and so a centred kicker still gets a full-width rule. ════════════════════════════════════════════════════════════════ */ /* The number belongs to the OPENER, not to a hand-maintained list of section class names. That list drifted the moment the page changed (Dan, 2026-08-09): the video section was added after it was written, so it opened on "SEC 00"; .product incremented but suppresses all three of its own kickers, so the reader jumped 03 -> 05; .trust incremented with no kicker at all and burned 10. Incrementing on the .kicker that actually PRINTS makes every number consecutive by construction - a new section cannot be forgotten, and a section without an opener cannot eat a number. */ body{counter-reset:sec} .kicker{counter-increment:sec} /* Scene labels INSIDE one section, not section openers. This list must stay identical to the ::after{display:none} list below and at :929 - a kicker that prints no number must not consume one either. (.pentry__copy is the current spec-sheet class; .pscene/.product__copy are its retired predecessors, kept because a stale name here fails silently.) */ .pscene .kicker,.product__copy .kicker,.pentry__copy .kicker{counter-increment:none} /* every section opens the way an app screen opens: 2px ink rule, mono rubric under it on the left, the section's own number on the right. */ .kicker{position:relative;display:block;padding-top:11px;margin-bottom:clamp(20px,2.6vw,32px)} .kicker::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--rule); transform:scaleX(0);transform-origin:left center} html.js .kicker.is-in::before,html:not(.js) .kicker::before{transform:scaleX(1); transition:transform .7s var(--ease)} .kicker::after{content:"SEC " counter(sec,decimal-leading-zero);position:absolute;right:0;top:11px; font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--tx-4); font-variant-numeric:tabular-nums} /* the product triptych's labels are SCENE names inside one pinned section, not section openers - a rule on each would claim three sections where there is one */ .pscene .kicker,.product__copy .kicker{padding-top:0;margin-bottom:14px} .pscene .kicker::before,.pscene .kicker::after, .product__copy .kicker::before,.product__copy .kicker::after{display:none} /* a centred kicker keeps its centred label; the rule and the number stay put */ .kicker[style*="center"]{text-align:center} @media(max-width:560px){ .kicker::after{display:none} /* the number is the first thing to go */ } /* ── v9.1 · the last of the dark-hero grammar ────────────────────── Four rules hardcoded #fff or a dark-only ground. Tokens could not reach them, so they were still painting for a black page: the finale headline and the footer logo rendered white on cream (invisible - only the teal half of "WorkCo" survived), and the retired glass artwork was still playing as a VIDEO even though its twin was hidden. */ .finale__h{color:var(--tx)} .finale__h em{color:var(--teal)} .footer__logo{color:var(--tx)} .footer__logo b{color:var(--teal)} .footer ul a:hover{color:var(--teal-deep)} .finale__vid{display:none} /* cube-loop.mp4: glass world, retired */ .finale__ctas{background:none;-webkit-backdrop-filter:none;backdrop-filter:none} .finale .kicker,.finale__trust{color:var(--tx-3)} .proof__vid{display:none} /* same video, second callsite */ /* ════════════════════════════════════════════════════════════════ TARANG · v9.2 (2026-08-08) — Dan's second review "no more stop and scroll effect" · "use text motion effects" · "this section looks confusing" · "some text is white on light" ════════════════════════════════════════════════════════════════ */ /* ── 1 · the last white text ──────────────────────────────────── Four rules still painted for a black page. On paper they were either invisible or a grey smear over a photo. */ .pscene h2,.pentry__copy h2{color:var(--tx)} .pscene h2 em,.pentry__copy h2 em{color:var(--teal)} .pscene .ticks li,.pentry__copy .ticks li{color:var(--tx-2)} .pscene .ticks svg,.pentry__copy .ticks svg{color:var(--teal)} .stat b{color:var(--ink)} .stat b em{color:var(--teal)} .stat .mono{color:var(--tx-3)} .proof__note{color:var(--tx-2)} .proof__h{color:var(--tx)} /* the industry cards had white type burned into a dark gradient scrim */ .icard figcaption{position:static;padding:10px 0 0;background:none;color:var(--tx); display:flex;align-items:baseline;gap:8px} .icard figcaption b{font-size:15px;font-weight:700;color:var(--tx)} .icard figcaption .mono{margin-left:auto;font-size:10px;color:var(--tx-4);letter-spacing:.1em} .icard{aspect-ratio:auto;border-radius:0;overflow:visible;width:min(280px,72vw)} .icard img{aspect-ratio:3/4;object-fit:cover;border:1px solid var(--hair)} .icard:hover img{transform:none} /* ── 2 · FEATURES: the spec sheet ─────────────────────────────── Was a 300vh pinned triptych that froze the page and crossfaded one phone. Now three ruled entries in normal flow: the page never stops moving, and each entry gets its OWN figure instead of sharing one. */ .product{position:relative;background:var(--paper);color:var(--tx); padding:clamp(90px,12vh,150px) 0;height:auto} .pentry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr); gap:clamp(28px,4.5vw,70px);align-items:center; padding:clamp(38px,5vw,62px) 0;border-top:2px solid var(--rule)} .pentry:first-child{border-top-width:3px} .pentry--flip .pentry__copy{order:2} .pentry--flip .pentry__fig{order:1} .pentry__copy h2{font-size:clamp(27px,3.4vw,44px);font-weight:700;line-height:1.22; letter-spacing:-.03em;margin:6px 0 24px} body[data-lang="th"] .pentry__copy h2, body[data-lang="zh"] .pentry__copy h2{line-height:1.32;letter-spacing:-.015em} .pentry__copy .kicker{padding-top:0;margin-bottom:10px} .pentry__copy .kicker::before,.pentry__copy .kicker::after{display:none} /* the ticks become ruled rows - the same row the app draws */ .pentry__copy .ticks{gap:0} .pentry__copy .ticks li{padding:13px 0;border-bottom:1px solid var(--hair);font-size:15px;align-items:center} .pentry__copy .ticks li:last-child{border-bottom:0} .pentry__copy .ticks svg{margin-top:0} .pentry__fig{margin:0;background:var(--paper-2)} .pentry__fig img{width:100%;height:auto;display:block} @media(max-width:860px){ .pentry{grid-template-columns:1fr;gap:26px} .pentry--flip .pentry__copy{order:0} .pentry--flip .pentry__fig{order:0} .pentry__fig{max-width:340px} } /* ── 3 · NUMBERS: text motion, not a scroll stop ──────────────── Was pinned for 300vh with the digits scrubbed by scroll position over a wall of glass cubes. Now the section scrolls past like any other and the digits ROLL into place on arrival, one column at a time, like a counter settling. The motion is the type itself. */ .proof{position:relative;background:var(--paper-2);color:var(--tx); padding:clamp(90px,12vh,150px) 0;height:auto} .proof__sticky{position:static;height:auto;display:block;overflow:visible} .proof__h{font-weight:700;letter-spacing:-.03em;line-height:1.2;margin-bottom:clamp(34px,4vw,56px)} body[data-lang="th"] .proof__h,body[data-lang="zh"] .proof__h{line-height:1.32} .proof__stats{margin-bottom:clamp(30px,3.6vw,46px)} .stat b{font-size:clamp(44px,5.6vw,88px);font-variant-numeric:tabular-nums} .stat .mono{font-family:var(--mono)} /* the odometer: one column per digit, a 0-9 strip inside, rolled into place */ .odo{display:inline-flex;font-style:normal} .odo__c{display:block;overflow:hidden;height:1em} .odo__s{display:block;will-change:transform} .odo__s span{display:block;height:1em;line-height:1} /* ── 4 · FEATURE INDEX: one shape, eight times ────────────────── Was 8 cards in 4 different shapes with 4 different anatomies. Dan: "it looks confusing." Every entry now reads identically: number, name, one line. The screenshots moved to their own figure strip below, so a photo never competes with a heading for the same row. */ .bx-index{display:grid;grid-template-columns:repeat(2,1fr);gap:0; border-top:2px solid var(--rule);border-left:1px solid var(--hair)} .bx{position:relative;padding:24px 26px 26px; border-right:1px solid var(--hair);border-bottom:1px solid var(--hair); transition:background .3s var(--ease)} .bx:hover{background:rgba(15,17,21,.02)} .bx__n{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600; letter-spacing:.14em;color:var(--tx-4);margin-bottom:12px;font-variant-numeric:tabular-nums} .bx h3{font-size:18.5px;font-weight:700;letter-spacing:-.015em;margin-bottom:7px;color:var(--tx)} .bx p{font-size:14.5px;line-height:1.68;color:var(--tx-2);text-wrap:pretty} .bx__tag{position:absolute;top:22px;right:24px} .bx__cta{margin-top:16px} .bx__cta .btn,.bx__cta .tg-btn{font-size:14px;padding:11px 18px} /* the figure strip: four printed plates, evenly weighted */ .bfigs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px); margin-top:clamp(30px,3.6vw,48px)} .bfig{margin:0} .bfig img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center top} @media(max-width:900px){ .bx-index{grid-template-columns:1fr;border-left:0} .bx{border-right:0} .bfigs{grid-template-columns:repeat(2,1fr)} } @media(max-width:520px){ .bfigs{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .odo__s{transition:none !important} } /* html.js beats a bare class selector, so the 380vh / 340vh pinned heights set earlier in this file would have survived and left a screen-and-a-half of empty page where the pinned scenes used to be. Killed explicitly. */ html.js .product{height:auto} html.js .proof{height:auto} /* ── EXPLAINER VIDEO SLOT (v9.3, reserved 2026-08-08) ───────────── A printed plate holding a 16:9 frame. The placeholder state draws the play mark and an amber PLACEHOLDER stamp so it is impossible to ship this by accident; dropping a