.privacy-link{font:inherit;color:inherit;text-decoration:underline;background:none;border:0;padding:0;cursor:pointer}.privacy-panel[hidden]{display:none}html.has-privacy-banner body{padding-bottom:var(--privacy-banner-height,0)}html.has-privacy-banner{scroll-padding-bottom:calc(var(--privacy-banner-height,0px) + 16px)}.privacy-panel{position:fixed;inset:auto 0 0 0;z-index:1000;display:flex;justify-content:center;padding:16px;background:none;pointer-events:none}.privacy-panel-card{pointer-events:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;width:min(1040px,100%);max-height:60vh;overflow:auto;padding:12px 18px;border-radius:18px;background:#fff;color:#16383a;box-shadow:0 24px 80px rgba(0,0,0,.35)}.privacy-panel-card h2{color:inherit;margin:0;font-size:.95rem;line-height:1.3;letter-spacing:0;flex:0 0 auto}.privacy-panel-card p{margin:0;font-size:.82rem;flex:1 1 220px;min-width:0}.privacy-panel-card label{margin:0;flex:0 0 auto;align-items:center;white-space:nowrap;font-size:.85rem}.privacy-panel-card [data-privacy-status]{flex:0 0 auto;font-size:.78rem;opacity:.75}.privacy-panel-card label{display:flex;gap:10px;align-items:flex-start;margin:20px 0}.privacy-panel-card input{inline-size:20px;block-size:20px}.privacy-panel-actions{display:flex;justify-content:flex-end;gap:10px;margin:0;flex:0 0 auto}.privacy-panel-actions .btn{padding:8px 16px;font-size:.85rem}.privacy-link:focus-visible,.privacy-panel :focus-visible{outline:3px solid #f2b544;outline-offset:3px} /* ============================================================ Away Digital Teams — Vietnam landing page, VERSION B Structure / UX / motion: Miro (miro.com), via Refero references. Palette and logo: identical to Version A — teal #2ec4b6 and near-black #1c1c1c. Miro's own blue CTA and yellow accent blocks are replaced by Away teal so the brand is unchanged. Loaded only by b.html. styles.css and index.html are untouched. ============================================================ */ :root{ /* Miro's canvas is a warm beige, not white. That single choice is what makes this read as Miro rather than a generic light theme. */ --canvas:#f7f4ee; --canvas-warm:#efe9dd; /* alternating band */ --surface:#fff; --ink:#1c1c1c; /* Away near-black, same as Version A */ --body:#3a3a3a; --caption:#5f5f5f; --muted:#7a7a7a; --hairline:#1c1c1c1f; --hairline-soft:#1c1c1c14; /* Away brand accent, in Miro's primary-action role */ --teal:#2ec4b6; --teal-bright:#1cddd1; --teal-deep:#0c5d58; --teal-tint:#d9f2ef; /* accent block fill, replacing Miro's yellow */ --font:"Switzer","Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --page:1240px; /* Hero art top anchor: how far the artwork's top edge sits above its grid column, in the hero's zoomed px. Per variant because the two heroes have different band padding; it is what keeps the art's top a fixed distance below the header at every width. */ --art-lift:110.5px; --gutter:24px; --section-gap:88px; /* Flow arrow glyph, used as a mask so it can take any colour. */ --flow-arrow:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 36 37%22%3E%3Cpath d=%22M18.3 33.2959C17.7 33.2959 16.95 33.1457 16.35 32.8453C14.55 32.0943 13.5 30.2918 13.5 28.3391V25.6354H5.7C3.3 25.6354 1.5 23.6827 1.5 21.2794V15.4214C1.5 13.0181 3.45 11.0654 5.7 11.0654H13.5V8.21153C13.5 6.25885 14.55 4.45638 16.35 3.70535C18 2.95432 19.95 3.25474 21.45 4.45638L32.85 14.5202C33.9 15.4214 34.5 16.7733 34.5 18.2753C34.5 19.7774 33.9 21.1292 32.85 22.0305L21.45 32.0943C20.55 32.8453 19.35 33.2959 18.3 33.2959ZM5.7 14.0696C5.1 14.0696 4.5 14.6704 4.5 15.4214V21.1292C4.5 21.8803 5.1 22.4811 5.7 22.4811H15C15.9 22.4811 16.5 23.0819 16.5 23.9831V28.1889C16.5 29.2403 17.1 29.8412 17.7 29.9914C18 30.1416 18.75 30.2918 19.5 29.691L30.9 19.6272C31.35 19.1765 31.65 18.7259 31.65 18.1251C31.65 17.5243 31.35 16.9235 30.9 16.6231L19.5 6.55926C18.75 5.95844 18 6.10865 17.7 6.25885C17.1 6.70947 16.5 7.31029 16.5 8.21153V12.4173C16.5 13.3185 15.9 13.9193 15 13.9193H5.7V14.0696Z%22/%3E%3C/svg%3E'); /* Miro rounds hard: 24px cards, pill controls. */ --r-card:24px; --r-tile:16px; --r-pill:200px; --shadow-card:rgba(28,28,28,.08) 0 2px 8px 0; --shadow-lift:rgba(28,28,28,.14) 0 16px 40px 0; --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.56,.64,1); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation-duration:.01ms!important;transition-duration:.01ms!important} } body{margin:0;background:var(--canvas);color:var(--body);font-family:var(--font); font-size:18px;line-height:1.5;-webkit-font-smoothing:antialiased} img{max-width:100%;height:auto} /* Desktop density deliberately mirrors an 85% browser zoom. Mobile retains its native scale, and visitors can still use their own browser zoom controls. */ @media (min-width:960px){body{zoom:85%}} /* Miro headlines are heavy and tightly tracked, while H2s step up one weight and one pixel to reinforce the page hierarchy. */ h1,h3,h4{margin:0 0 .5em;color:var(--ink);font-weight:700;letter-spacing:-.03em} /* H2s sit 10px closer to the copy beneath them than the rest of the heading scale, so each section reads as one block rather than two. */ h2{margin:0 0 max(0px, calc(.5em - 20px));color:var(--ink);font-weight:700;letter-spacing:-.03em} /* These two sections have no .section-sub under the heading, so the h2 itself carries a little extra breathing room. */ #approach-h,#tools-h{padding-bottom:5px} h1{font-size:clamp(45px,6vw,77px);line-height:1.02;font-weight:900} h2{font-size:clamp(33px,4.2vw,53px);line-height:1.08;font-weight:800} h3{font-size:22px;line-height:1.25;letter-spacing:-.02em} p{margin:0 0 18px} a{color:var(--ink)} :focus-visible{outline:3px solid var(--teal-deep);outline-offset:3px;border-radius:8px} .visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff; padding:12px 18px;border-radius:var(--r-pill)} .skip-link:focus{left:12px;top:12px} .rail{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)} .rail-narrow{max-width:860px} .section{padding:var(--section-gap) 0} #compare{padding-top:calc(var(--section-gap) - 20px)} .section-alt{background:var(--canvas-warm)} .section-sub{color:var(--caption);font-size:20px;max-width:64ch;margin-bottom:20px} /* ---------- Announcement bar: present on every Miro page ---------- */ .announce{margin:0;background:var(--teal);color:var(--ink);text-align:center; padding:10px var(--gutter);font-size:15px;font-weight:500} .announce a{color:var(--ink);text-underline-offset:3px} /* ---------- Header ---------- Kept dark so the existing white logo asset renders exactly as in Version A. Miro's own nav sits on the light canvas, but the brand mark ships white-only. */ .site-header{position:sticky;top:0;z-index:50;background:var(--ink)} .header-inner{display:flex;align-items:center;gap:24px;min-height:68px} .brand{display:flex;align-items:center;text-decoration:none} .brand img{display:block;width:auto;height:41px} .header-nav{display:none;gap:26px;margin-inline-start:auto} .header-nav a{color:#e8e8e8;text-decoration:none;font-size:15px;font-weight:500; transition:color .18s var(--ease)} .header-nav a:hover{color:var(--teal)} .site-header .btn{margin-inline-start:auto} @media (min-width:980px){.header-nav{display:flex}.site-header .btn{margin-inline-start:0}} /* ---------- Buttons: Miro pills, Away teal ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; min-height:52px;padding:0 30px;border-radius:var(--r-pill); font-family:inherit;font-size:17px;font-weight:600;text-decoration:none; border:2px solid transparent;cursor:pointer; transition:transform .18s var(--spring),background-color .18s var(--ease), color .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease)} .btn-primary{background:var(--teal);color:var(--ink)} .btn-primary:hover{background:var(--teal-bright);transform:translateY(-2px);box-shadow:var(--shadow-lift)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px)} .btn-sm{min-height:42px;padding:0 20px;font-size:15px} .btn-block{width:100%} .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px} .cta-note{color:var(--caption);font-size:17px;margin-top:23px} /* ---------- Hero: team cutout over a deep-teal gradient ---------- */ .hero{padding:72px 0 var(--section-gap);position:relative;isolation:isolate;overflow:hidden;background:#00171a} /* Below 960px the artwork is a full-bleed wash behind the hero copy: pulled out to the viewport edges and past the band's padding, then dimmed so faces never compete with the headline. */ .hero-backdrop{position:absolute;z-index:-1;top:-80px;bottom:-260px; left:calc(50% - 50vw);right:calc(50% - 50vw)} .hero-backdrop-fill{position:absolute;inset:0;display:block} .hero-backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:59% 35%} /* From 960px the artwork sits in the hero grid's second column, so its left edge is measured off the real copy column rather than a re-derived rail formula: the group starts a fixed step past the copy and never moves relative to the headline. Size, anchor and drop are each one continuous function of the window width, so the hero scales proportionally instead of stepping at breakpoints. */ @media (min-width:960px){ .hero-backdrop{position:relative;inset:auto;z-index:-1;align-self:stretch; /* body carries zoom:85% from 960px, and viewport units ignore zoom, so vw must be divided back out before it can be compared with layout px. */ --zoom:1;--vw:calc(100vw / var(--zoom)); /* Distance from the rail's content edge out to the viewport edge. */ --bleed:calc(max(0px,(var(--vw) - var(--page)) / 2) + var(--gutter)); /* The art holds its full 1040px height from 1280px up, so it reads identically to the widest layout across the whole normal desktop range. Below 1280px there is no longer room for it at full size, so it ramps down continuously (no breakpoint jump) to its 559px floor, shrinking from the bottom while its top edge stays put. Raw 100vw counts the same px the media queries do. The ramp slope scales with the cap, so the floor is still reached at the same viewport width as before. */ --art-h:clamp(559px,calc(1040px - (1280px - 100vw) * 1.391),1040px); --art-w:calc(var(--art-h) * 1296 / 751); /* The art is pinned by its TOP edge, not its bottom, and the anchor is a constant measured off the column's own top - not off the band height, which still breathes with the copy. So the art's top holds one distance below the header at every width; when it has to shrink, the bottom rises and the top does not move. */ /* A constant step past the copy column. This was a clamp that slid from 30px to -10px between 1440px and 1600px, which moved the group 40px sideways as the window resized and visibly changed the gap beside the headline. The group's left edge is exactly this offset from the column at every width, so a constant here is what keeps that gap fixed. */ --art-x:-10px} /* Left edge = the copy column + the anchor step, straight off the grid. Right edge = 30px inside the viewport, reached by bleeding out of the rail. */ .hero-backdrop-fill{position:absolute;left:var(--art-x);right:calc(30px - var(--bleed)); top:calc(-1 * var(--art-lift));bottom:auto;height:0} /* The group occupies 28%-83% of the file, and the element-relative translate cancels the file's empty left and top margin, so people — not padding — land on the anchor. Width comes from --art-h alone: letting the grid column drive it as well made the art grow as the window shrank and pushed its top edge past the hero, where overflow cut it on a hard line. */ .hero-backdrop img{position:absolute;left:0;top:0;bottom:auto;height:auto; width:var(--art-w); max-width:none;transform:translate(-27.97%,-16.65%); /* Every fade lands on the file's own empty margin (28% left, 32% top, 16% right, 12% bottom), never on a person: fading over the group reads as a crop. The top and left ramps are long and eased rather than linear - a linear ramp ends on a corner, and that corner is what reads as a straight cut where the wash meets the band. These dissolve into it instead. The top ramp also stays fully transparent for its first 13%: the art hangs slightly above the band, and 13% clears the hero's own top edge at every width, so overflow has nothing left to cut against the header. */ -webkit-mask-image:linear-gradient(90deg,#00000000,#00000029 7%,#00000080 13.5%,#000000d6 20%,#000 27%,#000 71%,#00000000),linear-gradient(#00000000,#00000000 13%,#00000029 17.75%,#00000080 22.5%,#000000d6 27.25%,#000 32%,#000 75%,#00000000); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#00000000,#00000029 7%,#00000080 13.5%,#000000d6 20%,#000 27%,#000 71%,#00000000),linear-gradient(#00000000,#00000000 13%,#00000029 17.75%,#00000080 22.5%,#000000d6 27.25%,#000 32%,#000 75%,#00000000); mask-composite:intersect} } /* Must come after the block above so it wins the cascade for --zoom. */ @media (min-width:960px){.hero-backdrop{--zoom:.85}} /* padding-block only: the shorthand would wipe the .rail gutter and let the copy run into the viewport edge. */ .hero-inner{position:relative;z-index:1;display:flex;align-items:center;min-height:480px;padding-block:70px 48px} /* Two columns from 960px - the same breakpoint as the desktop density switch: column 1 carries the copy's cap, so column 2's edge IS the copy column's edge, which is what the artwork anchors to. */ @media (min-width:960px){ .hero-inner{display:grid;grid-template-columns:minmax(0,var(--copy-col)) minmax(0,1fr);align-items:center;gap:0;--copy-col:52%} .hero-copy{max-width:100%} } @media (min-width:1200px){.hero-inner{--copy-col:44%}} /* The headline drops 5px against the rest of the copy stack. margin-top on the h1 alone would collapse into .hero-copy, so the shift is a translate: it moves the glyphs without changing the block's height or the gap below it. */ .hero h1{transform:translateY(5px)} .hero-copy{max-width:56ch} /* The grid column now caps the copy, so the element itself must not re-cap it. */ @media (min-width:960px){.hero-copy,.hero .lede,.hero .cta-note{max-width:100%}} /* Below that the artwork is a wash, so the copy is dimmed against it, not beside it. */ @media (max-width:959px){.hero-backdrop{opacity:.18}} .hero .cta-note{display:flex;align-items:center;gap:12px} /* The count runs 0->200 inside a sentence, so its digits are reserved and right-aligned against the "+": without that the whole line reflows on every frame while the number gains digits. */ .hero .cta-note .count{display:inline-block;min-width:3ch;text-align:right;font-variant-numeric:tabular-nums} .hero .cta-note .stat-icon{flex:none;width:44px;height:44px} .hero .cta-note .stat-icon svg{width:24px;height:24px} /* The banner headline is set to Version A's display scale so both hero variants read identically. B's own lighter h1 scale still governs every other heading on the page, so only the banner is affected. */ .hero h1{font-size:clamp(49px,7.6vw,95px);line-height:.98;letter-spacing:-2.4px;font-weight:800} /* One size up on phones. "Outsourcing," is the widest possible line and already filled the 24px gutter at 59px, so the bump comes with a 16px hero gutter and slightly tighter tracking; without both the comma clips at the viewport edge. */ /* -2px on the x axis: the negative tracking hangs a sliver of space off the last glyph of each line, so equal padding read as a wider right margin. */ @media (max-width:599px){.hero h1{font-size:62px;letter-spacing:-2.2px;transform:translate(-2px,5px)}.hero .rail{padding-inline:16px}} .hero h1{color:#fff}.hero .lede,.hero .cta-note{color:#d8ece9}.hero .btn-ghost{color:#fff;border-color:#fff}.hero .btn-ghost:hover{background:#fff;color:#00171a} .hero>.rail:last-child{position:relative;z-index:1} .lede{font-size:22px;line-height:1.45;color:var(--caption);max-width:52ch} @media (max-width:599px){.hero-backdrop{opacity:.26}.hero-inner{min-height:0;padding-block:52px 30px}.hero .statbar{margin-top:28px}.hero .statbar>div{padding:16px;grid-template-columns:44px minmax(0,1fr);column-gap:10px}.hero .stat-icon{width:44px;height:44px}.hero .stat-icon svg{width:24px;height:24px}.hero .statbar dt{font-size:26px}} @media (max-width:599px){.logostrip{display:none}} @media (max-width:420px){.hero .statbar{grid-template-columns:1fr}} /* Product visual framed as a canvas card, the way Miro presents its board. */ .hero-media{position:relative;background:var(--surface);border-radius:var(--r-card); padding:12px;box-shadow:var(--shadow-lift)} .hero-media img{display:block;width:100%;border-radius:var(--r-tile); max-height:min(48vh,420px);object-fit:cover;object-position:50% 22%} /* Collaborator cursors: Miro's most recognisable motion signature. Decorative only, so they are aria-hidden in the markup. */ .cursor{position:absolute;z-index:2;display:flex;align-items:center;gap:6px; font-size:12px;font-weight:600;pointer-events:none;white-space:nowrap} .cursor span{background:var(--cursor-c,#2ec4b6);color:#fff;padding:3px 9px;border-radius:var(--r-pill)} .cursor::before{content:"";width:0;height:0; border-left:8px solid var(--cursor-c,#2ec4b6); border-top:5px solid transparent;border-bottom:9px solid transparent; transform:rotate(-12deg)} .cursor-1{--cursor-c:#2ec4b6;top:4%;right:1%;animation:drift1 9s var(--ease) infinite} .cursor-2{--cursor-c:#1c1c1c;bottom:10%;left:-1%;animation:drift2 11s var(--ease) infinite} @keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,18px)}} @keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(26px,-14px)}} @media (prefers-reduced-motion:reduce){.cursor{animation:none}} @media (max-width:899px){.cursor{display:none}} /* Stat cards as sticky notes — Miro's canvas vocabulary. */ .statbar{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:64px 0 0;padding:0} /* The hero band already carries its own bottom padding, so the proof cards sit tight to the copy here rather than at the 64px the page's other stat rows use. */ @media (min-width:600px){.hero .statbar{margin-top:14px}} @media (min-width:900px){.statbar{grid-template-columns:repeat(4,1fr)}} .statbar>div{background:var(--surface);border:2px solid transparent;border-radius:var(--r-tile);padding:24px; box-shadow:var(--shadow-card);transition:background-color .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)} .stat-icon{grid-row:span 2;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#2ec4b626;color:var(--teal)} .stat-icon svg{width:32px;height:32px} /* Icon is 20% smaller than the page's default stat icon, and the grid column tracks it so the text start does not move independently. Inline padding is 3px tighter, giving the number and label a little more of the card. The small-screen block below packs these cards tighter still, so its values are restated after this rule rather than being lost to source order. */ .hero .statbar .stat-icon{width:48px;height:48px} .hero .statbar .stat-icon svg{width:26px;height:26px} .hero .statbar>div{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:14px;align-items:start;align-content:start;padding:15px 17px} @media (max-width:599px){ .hero .statbar .stat-icon{width:44px;height:44px} .hero .statbar .stat-icon svg{width:24px;height:24px} .hero .statbar>div{grid-template-columns:44px minmax(0,1fr);column-gap:10px;padding:16px} } /* Cards stretch to a common height, so centring the content dropped each number to a different place depending on how many lines its label wrapped to. Packing the rows to the top puts every number on one line across the row. The icon spans both rows, so it is centred against the pair rather than pinned to the number alone. */ .hero .statbar dt{grid-column:2}.hero .statbar dd{grid-column:2;margin-top:4px} .hero .statbar .stat-icon{align-self:center} .statbar>div:nth-child(2n){background:var(--teal-tint)} @media (hover:hover){.statbar>div:hover{border-color:var(--teal);box-shadow:var(--shadow-lift)}} @media (hover:hover){.hero .statbar>div:hover{border-color:var(--teal)!important;box-shadow:var(--shadow-lift)!important}} .statbar dt{font-size:38px;font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.05} .statbar dd{margin:8px 0 0;color:var(--caption);font-size:15px} /* ---------- Trust marquee ---------- */ .logostrip{padding:30px 0 var(--section-gap);background:var(--canvas)} .logostrip-h{color:var(--caption);font-size:16px;margin:0 0 20px;text-align:center} .marquee{display:flex;gap:16px;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{list-style:none;margin:0;padding:0;display:flex;gap:16px;flex:none; animation:marquee 42s linear infinite} /* The strip never pauses: hovering it used to stop the scroll, which reads as the animation breaking rather than as an affordance. Only the per-logo hover emphasis remains. */ /* Miro presents client logos as a flat grayscale row: no card, border or shadow around each mark, reduced opacity, colour returning on hover. */ .marquee-track li{min-height:64px;flex:none;padding:0 40px; display:flex;align-items:center;justify-content:center} /* Height set here, not via the attribute: the global img{height:auto} rule wins over it, and these marks have very different intrinsic aspect ratios. */ .marquee-track img{height:38px;max-height:none;width:auto;color:var(--ink); object-fit:contain; filter:grayscale(1);opacity:.6;transition:filter .18s var(--ease),opacity .18s var(--ease)} .marquee-track li:hover img{filter:grayscale(0);opacity:1} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-100% - 16px))}} @media (prefers-reduced-motion:reduce){ .marquee{overflow-x:auto} .marquee-track{animation:none} .marquee-track[aria-hidden="true"]{display:none} } /* ---------- How to start ---------- */ .steps{list-style:none;padding:0;margin:0;display:grid;gap:16px} @media (min-width:820px) and (max-width:999px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (min-width:1000px){.steps{grid-template-columns:repeat(5,minmax(0,1fr))}} #how .steps li{background:var(--surface);border:2px solid transparent;border-radius:var(--r-card);padding:28px; display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-card); transition:transform .22s var(--spring),border-color .22s var(--ease),box-shadow .22s var(--ease)} @media (hover:hover){#how .steps li:hover{transform:translateY(-6px) rotate(.6deg);border-color:var(--teal);box-shadow:var(--shadow-lift)}} .step-num{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:50%;background:var(--teal);color:var(--ink);font-size:18px;font-weight:700; margin-bottom:20px;position:relative;z-index:1;transition:box-shadow .3s var(--ease)} @media (hover:hover){.step-num:hover{box-shadow:0 0 14px 3px #75fff2cc,0 0 0 5px #2ec4b680}} /* Desktop card: the timeframe sits beside the numeral rather than under it, and the lead line continues from the end of that word - so numeral, timeframe and rule read as one row, matching the phone layout. Everything else spans the full card width beneath. The line stops inside the card rather than bridging the gap: a true cross-card rule gets clipped at the card boundary, and a line that stops short looks broken, so this ends cleanly and deliberately. */ @media (min-width:820px){ #how .steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;align-content:start} #how .steps li>*{grid-column:1/-1} #how .steps li .step-num{grid-column:1;grid-row:1;margin-bottom:0} #how .steps li .step-eta{grid-column:2;grid-row:1;align-self:center;margin:0} /* The copy sets its own tighter gap under the title, so it opts out of the card's shared 16px row spacing. */ #how .steps li>:nth-child(n+3):not(h3+p){margin-top:16px} /* 22px base, one size up. The copy carries the 16px row spacing shared by the rest of the card, so the gap under the title is set on that pairing alone. */ #how .steps li h3{font-size:24px;margin-bottom:0} #how .steps li h3+p{margin-top:6px} #how .steps li:not(:last-child) .step-eta{display:flex;align-items:center;gap:12px} #how .steps li:not(:last-child) .step-eta::after{content:"";flex:1;height:1px;background:var(--hairline)} } .step-eta{margin:0 0 6px;color:var(--teal-deep);font-size:13px;font-weight:600; letter-spacing:.08em;text-transform:uppercase} .steps h3{margin:0 0 10px} .steps p{color:var(--caption);font-size:16px;margin:0} .step-call{--call-surface:#e9fffb;position:relative;z-index:0;isolation:isolate;outline:3px solid var(--teal);outline-offset:-3px;background:radial-gradient(52% 48% at 0% 12%,#75fff28f,transparent 72%),radial-gradient(55% 52% at 100% 88%,#2ec4b65e,transparent 74%),var(--call-surface);background-size:180% 180%,180% 180%,auto;animation:quick-call-glow 4s linear infinite;box-shadow:0 0 24px #2ec4b677} .step-call::before{content:"";position:absolute;inset:-9px;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(42% 42% at 0% 0%,#75fff2,transparent 74%),radial-gradient(44% 44% at 100% 100%,#2ec4b6,transparent 74%);background-size:180% 180%;filter:blur(15px);opacity:.58;animation:quick-call-aura 4s linear infinite} /* Desktop: the CTA takes a row of its own below the copy, spanning the card's full width. On a phone it shares the copy's row instead - see the mobile block, which sets its own grid placement. */ @media (min-width:820px){ #how .steps li.step-call .btn{justify-self:stretch;text-align:center} } .step-call .btn{padding:10px 12px;font-size:13px;white-space:nowrap;box-shadow:0 0 0 1px #75fff24d,0 0 14px #2ec4b680} .step-call > *{position:relative;z-index:1} .step-call .step-num{z-index:2} .step-call:hover{--call-surface:#c9fff8;box-shadow:0 0 0 3px #38d8cb,0 0 44px #2ec4b6cc} .step-call:hover::before{filter:blur(21px);opacity:.92} @keyframes quick-call-glow{0%,100%{background-position:0% 0%,100% 100%,0 0;box-shadow:0 0 24px #2ec4b677}50%{background-position:100% 100%,0% 0%,0 0;box-shadow:0 0 40px #2ec4b6b3}} @keyframes quick-call-aura{0%,100%{background-position:0% 0%,100% 100%}50%{background-position:100% 100%,0% 0%}} @media (prefers-reduced-motion:reduce){.step-call,.step-call::before{animation:none}} .steps-foot{margin:20px 0 0;color:var(--caption);font-size:17px} .how-quote{max-width:1040px;margin:40px auto 0;padding:30px 32px;border:1px solid var(--hairline-soft);border-left:3px solid var(--teal);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card)} .how-quote blockquote{margin:0;color:var(--ink);font-size:clamp(21px,1.8vw,25px);font-weight:600;line-height:1.4;letter-spacing:-.02em} .how-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:20px;color:var(--caption);font-size:16px} .how-quote figcaption img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 18%;border:1px solid var(--hairline-soft)} .how-quote figcaption strong{display:block;color:var(--ink);font-weight:700} /* Attribution runs "Name / Role, Company" on one line. On a phone the role and company together overflow to two ragged lines, so the company takes its own line and the comma that joined them goes with it. */ /* The carousel sets `.who span{display:block}` for its stacked name/role, which would also break these two out onto lines of their own - hence the explicit inline above 599px, and the matching override below it. */ .who .who-org,.who .who-sep{display:inline} @media (max-width:599px){.who-org,.who .who-org{display:block}.who-sep,.who .who-sep{display:none}} /* Heading over the quote pair. Mobile only: on desktop the two quotes sit side by side directly under the steps and read as part of that section, so the extra heading was noise there. It owns the top gap, so the grid below sits tight. */ .how-quotes-h{display:none;max-width:1040px;margin:44px auto 16px;letter-spacing:-.03em} @media (max-width:599px){.how-quotes-h{display:block}} /* Only while the heading is actually shown; hidden, it must not eat the grid's gap. */ @media (max-width:599px){.how-quotes-h+.how-quotes{margin-top:0}} .how-quotes{max-width:1040px;margin:40px auto 0;display:grid;gap:20px} .how-quotes .how-quote{margin:0;max-width:none;display:flex;flex-direction:column} .how-quotes .how-quote figcaption{margin-top:auto;padding-top:20px} @media (min-width:800px){.how-quotes{grid-template-columns:1fr 1fr}} /* Mobile: full section-heading treatment (inherits the 34px h2 scale) with more air above it, so it reads as a break between the steps and the quotes rather than a label on the card below. Desktop keeps the smaller sub-heading size. */ @media (max-width:599px){.how-quote{margin-top:24px;padding:24px}.how-quote blockquote{font-size:22px;font-weight:400}.how-quote figcaption{font-size:15px}.how-quotes{margin-top:24px}.how-quotes .how-quote{margin-top:0}.how-quotes-h{margin:72px auto 14px}} /* ---------- Comparison ---------- */ .table-scroll{overflow-x:auto;border-radius:var(--r-card)} .compare{border-collapse:separate;border-spacing:0;table-layout:fixed;width:100%;min-width:860px;font-size:16px} .compare{--compare-col-1:27%} .compare :is(th,td):nth-child(1){width:var(--compare-col-1)} .compare :is(th,td):nth-child(2){width:23.5%} .compare :is(th,td):nth-child(3){width:23.5%} .compare :is(th,td):nth-child(4){width:26%} .compare-5col{--compare-col-1:22%;min-width:1080px} /* India (short name) gives up the most; Philippines keeps the width its own name needs; the surplus goes to "United States" so it stays on one line. */ .compare-5col :is(th,td):nth-child(2){width:17.25%} .compare-5col :is(th,td):nth-child(3){width:19.5%} .compare-5col :is(th,td):nth-child(4){width:19.5%} .compare-5col :is(th,td):nth-child(5){width:21.75%} .compare td{padding:22px;text-align:left;vertical-align:top;background:var(--surface); border-bottom:1px solid var(--hairline-soft);transition:background-color .22s var(--ease),box-shadow .22s var(--ease)} .compare thead th{transition:background-color .22s var(--ease),box-shadow .22s var(--ease)} .compare :is(th,td):not(:last-child){border-inline-end:1px solid var(--hairline-soft)} .compare :is(th,td){--market-outline:transparent;box-shadow:inset 2px 0 var(--market-outline),inset -2px 0 var(--market-outline)} .compare thead th{box-shadow:inset 2px 0 var(--market-outline),inset -2px 0 var(--market-outline),inset 0 2px var(--market-outline)} .compare tbody tr:last-child td{box-shadow:inset 2px 0 var(--market-outline),inset -2px 0 var(--market-outline),inset 0 -2px var(--market-outline)} /* The column beside the panel skips its left outline: that edge is already the panel's own border, and a second line of the same teal stacked against it read as one fat border rather than as the neighbour being outlined. */ .compare :is(th,td):nth-child(2){box-shadow:inset -2px 0 var(--market-outline)} .compare thead th:nth-child(2){box-shadow:inset -2px 0 var(--market-outline),inset 0 2px var(--market-outline)} .compare tbody tr:last-child td:nth-child(2){box-shadow:inset -2px 0 var(--market-outline),inset 0 -2px var(--market-outline)} @media (hover:hover){@supports selector(.compare:has(th:hover)){ .compare:has(:is(th,td):nth-child(1):hover) :is(th,td):nth-child(1):not(.is-best), .compare:has(:is(th,td):nth-child(2):hover) :is(th,td):nth-child(2), .compare:has(:is(th,td):nth-child(3):hover) :is(th,td):nth-child(3), .compare:has(:is(th,td):nth-child(4):hover) :is(th,td):nth-child(4){--market-outline:#2ec4b6} .compare:has(:is(th,td):nth-child(2):hover) :is(th,td):nth-child(2):not(.is-best), .compare:has(:is(th,td):nth-child(3):hover) :is(th,td):nth-child(3):not(.is-best), .compare:has(:is(th,td):nth-child(4):hover) :is(th,td):nth-child(4):not(.is-best){background:#f0faf8} }} .compare tbody tr:last-child td{border-bottom:0} .compare td::before{content:attr(data-label);display:block;margin-bottom:8px; color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase} .compare thead th{font-weight:700;font-size:29px;letter-spacing:-.03em;text-align:left; padding:28px 22px;background:var(--surface);vertical-align:top;color:var(--ink)} .compare thead th img{display:inline-block;margin:0 10px 0 0;border-radius:4px; width:30px;height:22px;object-fit:contain;object-position:left center;vertical-align:middle} .compare thead th:first-child{border-start-start-radius:var(--r-card)} .compare thead th:last-child{border-start-end-radius:var(--r-card)} .compare tbody tr:last-child td:first-child{border-end-start-radius:var(--r-card)} .compare tbody tr:last-child td:last-child{border-end-end-radius:var(--r-card)} /* Vietnam remains the visual focus without an explicit recommendation label. The slow teal outline sheen is the only motion in the comparison itself. */ .compare{position:relative} /* The cells carry no outline. Drawn per cell it was four independent borders rounding separately against fractional column widths, so the right edge could land a fraction thinner than the left; the outline is one rectangle on the underlay below, which cannot disagree with itself. */ .compare :is(th,td).is-best{--vietnam-surface:#d8faf5;background:transparent;position:relative;z-index:2;border-bottom:1px solid #1c1c1c26;border-right-color:transparent;box-shadow:none} /* The cells are raised above the underlay, so the generic column divider on their right edge painted over the outline's right border and left it looking thinner than the other three. Made transparent rather than removed, so the column keeps the same width and nothing shifts. */ /* The column fill lives on the underlay rather than on the cells, and the cells are transparent and raised, so both the bloom and the sheen paint behind the words instead of washing over them. */ /* One overlay across the whole first column. Painting the sheen per cell restarts the gradient in every row, which reads as a staircase rather than one band. */ /* Radius matches .table-scroll's own radius exactly: the scroll container clips with overflow, so a smaller radius here left the panel's top-left and bottom-left corners shaved flat by the container's wider curve. */ .compare::after{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--compare-col-1);z-index:1; pointer-events:none;border-radius:var(--r-card) 0 0 var(--r-card);overflow:hidden; /* Transparent border of the outline's width, so the sweep stops at the edge rather than washing over it. */ border:4px solid transparent;background-clip:padding-box; background:linear-gradient(105deg,transparent 42%,#ffffff5c 48%,#ffffffb0 50%,#ffffff5c 52%,transparent 58%); background-size:320% 100%;background-repeat:no-repeat;animation:vietnam-sheen 3.6s linear infinite} /* A soft white bloom in the panel's bottom-right corner, under the sheen: it lifts the far corner of the recommended column so the panel reads as a lit surface rather than a flat fill. Sized in % of the column so it scales with the table, and pointer-events stay off so the hover outline still works. */ /* The mint surface is already near-white, so the same alphas would be invisible; these are stronger in absolute terms but land at the same subtle lift. */ .compare{--bloom-in:#ffffffe6;--bloom-mid:#ffffff8c;--vietnam-column:#d8faf5} /* The column is width:27% under table-layout:fixed and so is this underlay, so a border-box border here traces the column exactly - one rectangle, four edges of guaranteed equal width at any viewport. */ /* Left corners keep the panel's radius; the right edge is square, because a curve there peeled away from the neighbouring India column and left a visible notch at the top-right and bottom-right corners. */ .compare::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;width:var(--compare-col-1);z-index:0; pointer-events:none;border-radius:var(--r-card) 0 0 var(--r-card);overflow:hidden;border:4px solid #2ec4b6; background:radial-gradient(120% 85% at 100% 100%,var(--bloom-in),var(--bloom-mid) 38%,transparent 68%),var(--vietnam-column); animation:vietnam-edge 3.6s linear infinite} .compare td.is-best::before{color:var(--teal-deep)} /* The onshore baseline cell marks a reference point, not the recommendation, so it keeps the normal surface and only strengthens its text. Reusing .is-best here would paint it as though it were the column being advocated. */ .compare td.is-baseline{font-weight:600} .compare .is-baseline .tag{background:var(--teal-deep);border-color:var(--teal-deep);color:#fff} @keyframes vietnam-sheen{from{background-position:220% 0}to{background-position:-120% 0}} @keyframes vietnam-edge{0%,100%{border-color:#2ec4b6}50%{border-color:#007f75}} @media (prefers-reduced-motion:reduce){.compare::before{animation:none}.compare::after{animation:none;background-position:50% 0}} .tag{display:inline-block;margin:8px 8px 0 0;padding:4px 14px;border-radius:var(--r-pill); background:var(--canvas-warm);color:var(--caption);font-size:12px;font-weight:600; letter-spacing:.04em;text-transform:uppercase} .tag-best{background:var(--teal);color:var(--ink)} .tag-warn{background:#f2e3d5;color:#7a4a1e} .sources{color:var(--muted);font-size:14px;margin-top:20px} /* Shorts row under the comparison table: horizontally scrollable so the 9:16 tiles sit side by side and the track visibly extends beyond the rail. */ .compare-shorts{margin-top:32px} .compare-shorts-h{margin:0 0 16px;color:var(--teal-deep);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .compare-shorts-track{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch} .compare-shorts-track .faq-short{flex:0 0 180px;scroll-snap-align:start} .compare-shorts-track .faq-short span:last-child{font-size:22px;line-height:1.3} .compare-shorts-track::-webkit-scrollbar{height:6px} .compare-shorts-track::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:3px} /* Common concerns are objection handling, not testimonials. Refero's enterprise card cue is a restrained frame and crisp, evenly proportioned quote surfaces. */ /* A full-width section of its own rather than a boxed card inside the comparison: the concerns are their own step in the argument, so they get a section's own rhythm and the surface tint runs edge to edge instead of stopping at a border. */ .concerns{background:var(--canvas-warm)} .concerns h2{margin-bottom:18px} #concerns-h{scroll-margin-top:112px} /* Same peeking carousel as the testimonials: two cards read in full and a quarter of the third shows, so the row visibly continues and the arrows have a job. Native overflow scroll, so trackpad, touch, keyboard and the buttons all drive one mechanism and it still works with JS off. */ .concerns-carousel{position:relative} .concerns-grid{display:grid;grid-auto-flow:column;grid-auto-columns:85%;gap:16px; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; /* overflow-x:auto forces overflow-y to auto as well, so the cards' shadow and focus ring were sliced at the track edges. Pad the scroll box out to clear the hover lift, then pull the layout back with matching negative margins. */ padding-block:28px 60px;margin-block:-28px -60px; scrollbar-width:none} .concerns-grid::-webkit-scrollbar{display:none} .concerns-grid>*{scroll-snap-align:start} .concerns-grid:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:var(--r-card)} @media (min-width:700px){.concerns-grid{grid-auto-columns:calc((100% - 2 * 16px) / 2.25)}} /* The arrows sit inside the panel's padding, so they clear the cards rather than hanging over the section edge like the testimonial row's. */ .concerns-carousel .quotes-prev{left:-8px} .concerns-carousel .quotes-next{right:-8px} /* Hover matches the Why Vietnam cards: a short lift, slight tilt and stronger shadow make the response clear without changing the card layout. */ .concern{display:flex;align-items:center;background:var(--surface);border:1px solid var(--hairline-soft);border-left:3px solid var(--teal);border-radius:var(--r-card);padding:28px;box-shadow:var(--shadow-card);transition:transform .22s var(--spring),border-color .22s var(--ease),box-shadow .22s var(--ease)} @media (hover:hover){.concern:hover{transform:translateY(-6px) rotate(.6deg);border-color:var(--teal);box-shadow:var(--shadow-lift)}} .concern blockquote{margin:0;color:var(--ink);font-size:clamp(21px,1.65vw,25px);font-weight:600;line-height:1.35;letter-spacing:-.02em} @media (max-width:599px){.concerns h2{margin-bottom:24px}.concern{padding:24px}} .scroll-hint{color:var(--caption);font-size:15px;margin:14px 0 0} @media (min-width:1120px){.scroll-hint{display:none}} /* ---------- Lead magnets: calculator + readiness checklist (Miro cards) ---------- */ .tools-grid{display:grid;gap:20px} @media (min-width:960px){.tools-grid{grid-template-columns:1fr 1fr;align-items:start}.tools-grid-single{grid-template-columns:minmax(0,1fr)}.tool-card-wide{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}.tool-card-wide .ready-form{margin-top:0}.tool-card-wide .convo-fields{grid-template-columns:1fr}} .tool-card{background:var(--surface);border-radius:var(--r-card);padding:36px;box-shadow:var(--shadow-card)} .tool-card h3{font-size:35px;font-weight:900;letter-spacing:-.03em;margin-bottom:10px} .tool-sub{color:var(--caption);font-size:17px;margin-bottom:24px} .calc-estimate{margin:-8px 0 24px;padding:12px 14px;border:1px solid #2ec4b64d;border-left:3px solid var(--teal);border-radius:0 var(--r-card) var(--r-card) 0;background:var(--teal-tint);color:var(--caption);font-size:14px;line-height:1.45} .calc-estimate strong{color:var(--ink)} .calc-fields .field{margin:0 0 18px} .calc-fields input[type="number"]{width:100%;min-height:48px;padding:10px 22px; border:2px solid var(--hairline);border-radius:var(--r-pill);background:var(--canvas); color:var(--body);font:inherit;font-size:16px;transition:border-color .18s var(--ease)} .calc-fields input:focus-visible{border-color:var(--teal)} .calc-fields output{color:var(--teal-deep);font-weight:600} .calc-fields input[type="range"]{width:100%;accent-color:var(--teal);min-height:32px} .calc-result{margin-top:24px;border-top:1px solid var(--hairline-soft);padding-top:20px} .calc-note{color:var(--caption);font-size:14px;margin-bottom:14px} .calc-breakdown{margin:0 0 20px;padding:0;display:grid;gap:0} .calc-breakdown>div{display:flex;justify-content:space-between;gap:12px;padding:12px 0; border-bottom:1px solid var(--hairline-soft)} .calc-breakdown dt{color:var(--caption);font-size:15px} .calc-breakdown dd{margin:0;color:var(--ink);font-size:16px;font-weight:600} .calc-save dd{color:var(--teal-deep);font-weight:700;font-size:22px} /* Readiness checklist teaser */ .ready-preview{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px} .ready-preview li{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:16px} .ready-preview li::before{content:"✓";color:#16a34a;font-weight:900;font-size:22px;line-height:1;flex:none} .ready-count{color:#16a34a} .ready-form{margin-top:20px} .ready-form .convo-fields label:last-child{grid-column:auto} /* Checkbox and its label on one baseline, and the box itself left at its native size rather than restyled: a custom control here would be one more thing that can silently stop reflecting :checked, and this one gates the send. */ .ready-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px; color:var(--caption);font-size:14px;line-height:1.45;cursor:pointer} .ready-consent input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--teal-deep)} .ready-consent input:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px} .ready-form .convo-privacy{margin-top:12px} .ready-form .btn{margin-top:18px} /* Duplicate of the consent line's privacy link, shown only on a phone - see the comment in index.html. */ .ready-privacy{display:none} /* Phone: the whole section has to clear the fold, so the card loses padding, the copy tightens, the submit spans the card and the privacy line moves below it. */ @media (max-width:599px){ .tool-card{padding:24px 20px} .ready-copy .tool-sub{font-size:16px;margin-bottom:16px} .ready-preview{margin-bottom:14px;gap:8px} .ready-preview li{font-size:15px} .ready-form{margin-top:14px} .ready-form .convo-fields{gap:10px} .ready-form .convo-fields input{min-height:44px} .ready-consent{margin-top:10px;font-size:13px} .ready-form .btn{display:block;width:100%;margin-top:12px;text-align:center} .ready-privacy{display:block;margin:10px 0 0;color:var(--caption);font-size:13px} } .ready-success{margin:20px 0 0;color:var(--ink);font-size:16px;line-height:1.5} .ready-success a{color:var(--teal-deep)} /* Readiness checklist page: helpful preparation, not a pass/fail score. */ .ready-list{list-style:none;counter-reset:ready;margin:0;padding:0;border-top:1px solid var(--hairline-soft)} .ready-item{counter-increment:ready;position:relative;padding:24px 0 24px 58px;border-bottom:1px solid var(--hairline-soft)} .ready-item::before{content:counter(ready);position:absolute;left:0;top:24px;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:var(--teal-tint);color:var(--teal-deep);font-size:15px;font-weight:700} .ready-item h3{font-size:22px;margin:0 0 8px;color:var(--ink)} .ready-item p{margin:0;color:var(--caption);font-size:17px} .ready-foot{margin-top:36px;padding:32px;border:2px solid var(--teal);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--shadow-card)} .ready-foot p{color:var(--ink);font-size:18px;margin:0} @media (min-width:720px){} /* ---------- Sector tabs ---------- */ .tablist-label{margin:0 0 14px;color:var(--caption);font-size:15px} /* The row scrolls sideways, and a scroll container clips both axes - so the hover lift and the focus ring were being sliced off flat along the top edge. The padding makes room for that overhang and the negative margin takes it back out of the layout, so the row sits exactly where it did. */ .tablist{--tab-overhang:10px; display:flex;gap:10px;overflow-x:auto; padding-top:var(--tab-overhang);margin-top:calc(-1 * var(--tab-overhang)); /* The overhang is added to the padding on both sides and taken back out of the margin, so the row occupies exactly the space it did before. */ padding-bottom:var(--tab-overhang);margin-bottom:calc(44px - var(--tab-overhang))} .tablist button{flex:none;border:2px solid var(--ink);background:transparent;color:var(--ink); border-radius:var(--r-pill);padding:0 22px;min-height:46px; font:inherit;font-size:15px;font-weight:600;cursor:pointer; transition:background-color .18s var(--ease),color .18s var(--ease),transform .18s var(--spring)} .tablist button:hover{transform:translateY(-2px)} .tablist button[aria-selected="true"]{background:var(--ink);color:#fff} .panel-grid{display:grid;gap:28px} @media (min-width:900px){.panel-grid{grid-template-columns:340px 1fr;gap:36px}} .factlist{list-style:none;margin:0;padding:0;display:grid;gap:16px;align-content:start} /* Sectors carry two or three facts; either count fills the column beside the copy panel so the two sides end level and no sector leaves a ragged gap below. */ @media (min-width:900px){ .factlist{grid-auto-rows:1fr;align-content:stretch} } .factlist li{background:var(--teal-tint);border-radius:var(--r-tile);padding:22px} .factlist strong{display:block;font-size:35px;font-weight:900;letter-spacing:-.03em;color:var(--ink)} .factlist span{display:block;color:var(--caption);font-size:15px;margin-top:8px} .panel-copy{background:var(--surface);border-radius:var(--r-card);padding:32px;box-shadow:var(--shadow-card)} .panel-copy p{color:var(--caption);font-size:17px} .panel-copy h3{margin:28px 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--muted)} /* Miro's "related templates" pattern: a plain divided list, not pills. Reads as a catalogue of what you can build rather than decorative tags. */ .rolelist{list-style:none;display:grid;padding:0;margin:0; border-top:1px solid var(--hairline-soft)} @media (min-width:560px){.rolelist{grid-template-columns:repeat(2,1fr);column-gap:32px}} .rolelist li{padding:12px 0;border-bottom:1px solid var(--hairline-soft); font-size:16px;color:var(--ink);display:flex;align-items:center;gap:10px; transition:color .18s var(--ease)} .rolelist li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%; background:var(--teal)} .rolelist li:hover{color:var(--teal-deep)} /* Phone: the Technology panel ran 2.2 screens, half of it whitespace inside the stat tiles and the role rows. The facts collapse from three stacked cards into one tinted card of hairline-divided rows, and the role catalogue keeps its divided-list identity at a tighter rhythm - same components, more density, and no information moved behind a tap. */ @media (max-width:599px){ .tablist-label{margin-bottom:10px;font-size:14px} .tablist{margin-bottom:calc(24px - var(--tab-overhang))} .tablist button{min-height:40px;padding:0 16px;font-size:14px} .panel-grid{gap:16px} .factlist{gap:0;background:var(--teal-tint);border-radius:var(--r-tile);padding:2px 18px} .factlist li{background:none;border-radius:0;padding:14px 0;box-shadow:inset 0 -1px 0 var(--hairline-soft)} .factlist li:last-child{box-shadow:none} .factlist strong{font-size:26px} .factlist span{font-size:13px;margin-top:2px;line-height:1.4} .panel-copy{padding:20px} .panel-copy p{font-size:16px;line-height:1.5} .panel-copy h3{margin:18px 0 8px} /* Deliberately still one column: two columns saves 130px on the longest catalogue but wraps most role names onto a second line, and the ragged rows cost more legibility than the scroll they save. */ .rolelist li{padding:8px 0;font-size:15px} } /* ---------- Why Vietnam: sticky-note grid ---------- */ /* The cutout has no background of its own, so it sits directly on the section rather than in a frame - a card would put a hard edge around a soft edge. It is capped well below the rail so it reads as a closing flourish, not a banner. */ /* The cutout is cropped flat at the frame's bottom edge, so it would otherwise end on a razor line across the section. A short eased fade over the last eighth dissolves that cut; it is kept short so it lands on the crop, not on faces. */ /* The heading and the team sit on one row above the stat grid: the copy holds the left, the cutout closes the right and its feet land just above the cards. */ .why-head{display:grid;gap:8px 40px;align-items:end;margin-bottom:48px} .why-head .section-sub{margin-bottom:0} @media (min-width:900px){ /* The copy keeps its own measure and the image takes what is left, so the image never squeezes the sentence into a narrow column. */ .why-head{grid-template-columns:minmax(0,1fr) minmax(0,42%)} } /* The cutout has no background of its own, so it sits directly on the section rather than in a frame - a card would put a hard edge around a soft edge. */ .why-team{position:relative;top:10px;display:block;width:100%;height:auto;justify-self:end; /* Cropped flat at the source frame's bottom, so it would otherwise end on a razor line just above the cards. A short eased fade dissolves that cut - kept shallow so it softens the edge without eating into the photo. */ -webkit-mask-image:linear-gradient(#000 91%,#000000d6 95%,#00000059 98%,#00000000); mask-image:linear-gradient(#000 91%,#000000d6 95%,#00000059 98%,#00000000)} /* Larger and nudged left of its column: the cutout has transparent margins, so it can spill past the grid track without crowding the copy. */ @media (min-width:900px){.why-team{width:120%;max-width:none;transform:translateX(-20px)}} /* Stacked, it reads as a banner rather than a flourish, so it is capped and centred instead of running the full width. */ @media (max-width:899px){.why-team{max-width:672px;margin:4px auto 0;justify-self:center}} /* Phone: the cutout's mask already fades into the section, so the 48px below it read as a gap rather than as breathing room; the cards lose 5px of vertical padding, and the section's own CTA goes - the sticky bar carries the same ask. */ @media (max-width:599px){ .why-head{margin-bottom:20px} /* Matches the specificity of the marquee's own card rule further down. */ .why-marquee .why-grid>li{padding-block:25px} #why-vietnam .cta-row{display:none} } .why-grid{list-style:none;display:grid;gap:16px;padding:0;margin:0} @media (min-width:720px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:1040px){.why-grid{grid-template-columns:repeat(3,1fr)}} /* The six cards run as one scrolling row instead of wrapping to two. Same duplicated-track loop as the trust strip: each copy shifts by its own full width plus one gap, so copy two lands exactly where copy one started, seam-free. */ /* The padding gives the cards' drop shadow and their -6px hover lift somewhere to paint: overflow:hidden sits flush to the card box otherwise and slices both off. The matching negative margin gives the space straight back, so the section keeps the rhythm it had as a grid. */ /* Scrollable as well as animated, like the differentiator row: trackpad, touch, keyboard and drag all move it, and JS pauses the drift while that happens so the two don't fight over position. Scrollbar hidden - the row advertises by moving. */ .why-marquee{display:flex;gap:16px;overflow-x:auto;overflow-y:hidden; scrollbar-width:none;-ms-overflow-style:none;overscroll-behavior-x:contain; padding-block:12px 48px;margin-block:-12px -48px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .why-marquee::-webkit-scrollbar{display:none} .why-marquee:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:var(--r-card)} /* Both grid copies ride one animated track, same as .diff-track: the wrap lands on the track's own half-width, pixel-exact, so the loop restart cannot blink. */ .why-track{display:flex;flex:none;gap:16px;animation:why-marquee 64s linear infinite} /* Beats both .why-grid and its grid-template media queries on specificity, so the card styling below is inherited unchanged and only the layout is replaced. */ .why-marquee .why-grid{display:flex;flex:none;gap:16px} .why-marquee .why-grid>li{width:clamp(272px,74vw,340px);flex:none} /* Unlike the logo strip, these cards carry copy a visitor has to read, so the row halts under the cursor rather than scrolling out from under them mid-sentence. */ @media (hover:hover){.why-marquee:hover .why-track{animation-play-state:paused}} /* Covers the pointerless case: a touch drag or trackpad scroll never fires :hover. */ .why-marquee.is-paused .why-track{animation-play-state:paused} @keyframes why-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 8px))}} @media (prefers-reduced-motion:reduce){ .why-marquee{overflow-x:auto} .why-track{animation:none} .why-marquee .why-grid[aria-hidden="true"]{display:none} } .why-grid li{background:var(--surface);border-radius:var(--r-card);padding:30px; box-shadow:var(--shadow-card); transition:transform .22s var(--spring),box-shadow .22s var(--ease)} .why-grid li:nth-child(3n+2){background:var(--teal-tint)} .why-grid li:hover{transform:translateY(-6px) rotate(.6deg);box-shadow:var(--shadow-lift)} .why-grid .stat{display:flex;align-items:baseline;gap:2px;font-size:50px;font-weight:700; letter-spacing:-.03em;color:var(--ink);margin:0 0 8px;line-height:1} .why-grid h3{margin:0 0 10px} .why-grid p:last-child{color:var(--caption);font-size:16px;margin:0} /* ---------- Differentiators ---------- All five points remain visible. They stack on phones, use two columns on intermediate screens, and become five narrower, taller cards on desktop. */ .diff-marquee{padding-block:12px;margin-block:-12px} .diff-track{width:100%} .diff-marquee .diff-grid{list-style:none;padding:0;margin:0;display:grid;gap:20px;width:100%} @media (min-width:680px){.diff-marquee .diff-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1000px){.diff-marquee .diff-grid{grid-template-columns:repeat(5,minmax(0,1fr))}} /* Each point is boxed: on the warm band the list previously read as loose text floating on the background with no edge of its own. Content is top-aligned and the heading row reserves two lines, because with the row auto-sized a one-line heading pulled its paragraph up and the cards scrolling past each other read as ragged. align-content:start matters here: the flex track stretches every card to the tallest, and without it that extra height is shared out between the rows. */ .diff-grid li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px; align-items:start;align-content:start; background:var(--surface);border:2px solid transparent;border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow-card); transition:transform .22s var(--spring),border-color .22s var(--ease),box-shadow .22s var(--ease)} @media (hover:hover){.diff-grid li:hover{transform:translateY(-6px) rotate(.6deg);border-color:var(--teal);box-shadow:var(--shadow-lift)}} /* Centred in the reserved heading row, matching the heading's own centring, so a one-line and a two-line card still read as one horizontal band. */ .diff-icon{display:flex;grid-column:1;grid-row:1;align-self:center;align-items:center;justify-content:center;width:52px;height:52px; border-radius:var(--r-tile);background:var(--teal-tint);color:var(--teal-deep)} .diff-icon svg{width:26px;height:26px} .diff-grid h4{grid-column:2;grid-row:1;font-size:24px;font-weight:700;line-height:1.3;letter-spacing:-.02em;margin:0; display:flex;align-items:center;min-height:2.6em} .diff-grid p{grid-column:1/-1;color:var(--caption);font-size:16px;margin:14px 0 0} @media (min-width:1000px){ .diff-grid li{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding:20px} .diff-icon{grid-column:1;grid-row:1;align-self:start;width:44px;height:44px;margin-bottom:16px} .diff-icon svg{width:23px;height:23px} .diff-grid h4{grid-column:1;grid-row:2;align-items:flex-start;min-height:3.9em;font-size:20px} .diff-grid p{grid-column:1;grid-row:3;margin-top:12px;font-size:15px} } /* ---------- Alternating feature rows: Miro's core section rhythm ---------- */ .featurerow{display:grid;gap:32px;align-items:center;padding:44px 0} .featurerow + .featurerow{border-top:1px solid var(--hairline-soft)} @media (min-width:900px){ .featurerow{grid-template-columns:1fr 1fr;gap:64px} /* Source order stays copy-then-media for screen readers; only the visual column order flips, which is what produces the zig-zag. */ .featurerow-flip .featurerow-copy{order:2} } .featurerow-eyebrow{margin:0 0 10px;color:var(--teal-deep);font-size:13px;font-weight:600; letter-spacing:.08em;text-transform:uppercase} .featurerow h3{font-size:clamp(26px,3vw,36px);line-height:1.15;margin-bottom:14px} .featurerow p{color:var(--caption);font-size:17px} .featurerow-media img{display:block;width:100%;border-radius:var(--r-card); box-shadow:var(--shadow-lift)} /* Code-native timezone strip, so no stock photo has to stand in for a real overlap. */ .tzcard{background:var(--surface);border-radius:var(--r-card);padding:28px; box-shadow:var(--shadow-card)} .tzcard-h{margin:0 0 20px;font-weight:700;color:var(--ink);font-size:17px} .tzrow{display:flex;align-items:center;gap:14px;margin-bottom:14px} .tzrow b{flex:none;width:104px;font-size:14px;font-weight:500;color:var(--caption)} .tzbar{position:relative;flex:1;height:14px;border-radius:var(--r-pill);background:var(--canvas-warm)} .tzbar i{position:absolute;top:0;bottom:0;left:var(--s);width:var(--w); border-radius:var(--r-pill);background:var(--ink)} .tzbar i.tz-teal{background:var(--teal)} .tzcard-f{margin:20px 0 0;font-size:14px;font-weight:600;color:var(--teal-deep)} /* ---------- Social proof ---------- */ .hl{background-image:linear-gradient(var(--teal),var(--teal));background-repeat:no-repeat; background-size:100% 12px;background-position:0 88%;padding-bottom:.05em} /* Testimonials are a peeking carousel, not a grid: two cards read in full and a third sits half in view, so the row visibly continues and the arrows have an obvious job. Below 700px it is one card with a peek. Native overflow scroll does the work, so trackpad, touch, keyboard and the buttons all drive the same mechanism and it still works with JS off. */ /* The carousel is a viewport: nothing inside it may ever affect the width of the page. Without this the loop's clones - which sit far off to the right - leaked into the document's scroll width once a wrap fired mid-animation, and the whole page could then be dragged sideways. `clip` rather than `hidden` so the other axis stays visible and no nested scroll container appears; the margin keeps the arrows, which hang outside the box, and their focus rings. */ .quotes-carousel,.concerns-carousel{overflow-x:clip;overflow-clip-margin:60px} .quotes-carousel{position:relative} .quotes{list-style:none;padding:0;margin:0; display:grid;grid-auto-flow:column;grid-auto-columns:85%; gap:var(--quote-gap);align-items:stretch; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-left:0; /* Room for the cards' own shadow and focus ring; overflow-x:auto forces overflow-y:auto, so anything painted outside the box gets clipped. The negative margin takes the space back off the layout. */ padding-block:16px;margin-block:-16px; scrollbar-width:none} .quotes::-webkit-scrollbar{display:none} .quotes>*{scroll-snap-align:start} .quotes:focus-visible{outline:3px solid var(--teal);outline-offset:4px;border-radius:var(--r-card)} @media (min-width:700px){ /* 2 full cards + half of the third, gaps included. */ .quotes{grid-auto-columns:calc((100% - 2 * var(--quote-gap)) / 2.5)} } .quote{display:flex;flex-direction:column} /* Long quotes are truncated to a common depth so the cards stay comparable and the row keeps its rhythm; the full version lives behind the video link. */ .quote blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6; line-clamp:6;overflow:hidden} .quote blockquote p+p{margin-top:.6em} .quote blockquote p:last-child{margin-bottom:0} /* The attribution and links are pinned to the bottom so they line up across cards regardless of how much quote each one carries. */ .quote .who,.quote .quote-who{margin-top:auto} .quotes-nav{position:absolute;top:50%;translate:0 -50%;z-index:2; display:grid;place-items:center;width:44px;height:44px;padding:0; border-radius:50%;cursor:pointer; transition:opacity .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease)} .quotes-nav svg{width:22px;height:22px} .quotes-prev{left:-10px} .quotes-next{right:-10px} /* Hidden until JS confirms the row actually overflows, and again at each end. */ .quotes-nav[hidden],.quotes-nav[disabled]{opacity:0;pointer-events:none} @media (hover:hover){.quotes-nav:not([disabled]):hover{transform:scale(1.08)}} @media (max-width:699px){.quotes-nav{display:none}} /* Version B: light canvas and Miro's solid teal controls, matching the play button. */ .quotes{--quote-gap:20px} .quotes-nav{border:0;background:var(--teal);color:var(--ink);box-shadow:var(--shadow-card)} @media (hover:hover){.quotes-nav:not([disabled]):hover{background:var(--teal-deep);color:#fff}} .quote{background:var(--surface);border-radius:var(--r-card);padding:24px;box-shadow:var(--shadow-card)} .video-link{display:block;position:relative;border-radius:var(--r-tile);overflow:hidden;margin-bottom:20px} .video-link img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} .video-link::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.2); transition:background .18s var(--ease)} .video-link:hover::after{background:rgba(0,0,0,0)} .video-link .play{position:absolute;z-index:1;inset:50% auto auto 50%;translate:-50% -50%; width:60px;height:60px;border-radius:50%;background:var(--teal);color:var(--ink); display:grid;place-items:center;font-size:20px; transition:transform .22s var(--spring)} .video-link:hover .play{transform:scale(1.12)} .quote blockquote{margin:0} .quote blockquote p{color:var(--caption);font-size:17px} /* The markup uses .who (shared with Version A); .quote-who is kept as an alias so either shape renders. Without this the name and role ran together on one line. */ .quote-who,.who{display:flex;align-items:center;gap:12px;margin-top:18px; color:var(--muted);font-size:14px;line-height:1.45} .quote-who img,.who img{flex:none;width:46px;height:46px;border-radius:50%;object-fit:cover} .quote-who b,.who strong{display:block;color:var(--ink);font-size:16px;font-weight:700} .quote-who span,.who span{display:block} .quote-links{margin-top:20px;display:flex;gap:14px;flex-wrap:wrap} /* ---------- FAQ ---------- */ .faq-group{margin:36px 0 16px;font-size:13px;font-weight:600;letter-spacing:.08em; text-transform:uppercase;color:var(--teal-deep)} /* First heading in each column, not just the first on the page. */ .faq-col>.faq-group:first-child{margin-top:0} .faq details{background:var(--surface);border-radius:var(--r-tile);margin-bottom:12px; box-shadow:var(--shadow-card);transition:box-shadow .18s var(--ease)} .faq details[open]{box-shadow:var(--shadow-lift)} /* Twelve rows stack up, so the vertical padding is tighter than a standard card while the summary stays comfortably past the 44px target height. */ .faq summary{display:flex;justify-content:space-between;gap:20px;align-items:flex-start; padding:15px 24px;cursor:pointer;list-style:none;font-size:19px;font-weight:600; letter-spacing:-.01em;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";flex:none;color:var(--teal-deep);font-size:26px;line-height:1} .faq details[open] summary::after{content:"\2212"} .faq details p{margin:0;padding:0 24px 18px;color:var(--caption);font-size:17px} .faq details strong{color:var(--ink)} /* The shorts sit under the questions rather than beside them: the answers keep the full reading width, and the videos get a row wide enough to be legible. */ .faq-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:40px} /* Two columns on the full-width rail: nine questions in one column ran longer than a screen and a half. Groups are the unit, so an open answer only pushes its own column. */ .faq-list{display:grid;gap:32px} @media (min-width:900px){.faq-list{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}} /* Capped: across the full 1240px rail a 9:16 tile would stand 700px tall. */ /* The cards live in .faq-shorts-track now, so this is just the heading plus that row; the old 3-up column rule would have overridden the track's own layout. */ .faq-shorts{display:grid;gap:16px;align-content:start;min-width:0;width:100%} .faq-shorts h3{margin:0;color:var(--teal-deep);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .faq-short{display:block;color:#fff;text-decoration:none} .faq-short-media{position:relative;display:block;overflow:hidden;aspect-ratio:9/16;border:2px solid transparent;border-radius:var(--r-tile);background:var(--surface);box-shadow:var(--shadow-card);transition:border-color .22s var(--ease),box-shadow .22s var(--ease)} .faq-short-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#1024211f 0%,#10242166 50%,#1024213d 100%)} .faq-short-media img{width:100%;height:100%;object-fit:cover} .faq-short-title{position:absolute;z-index:1;inset:0;display:grid;place-items:center;padding:20px;color:#fff;font-size:clamp(18px,2vw,25px);font-weight:700;line-height:1.15;text-align:center;text-wrap:balance;text-shadow:0 2px 12px #000,0 1px 2px #000} .faq-short:hover .faq-short-title{text-decoration:underline;text-underline-offset:4px} .faq-short:focus-visible .faq-short-media{border-color:var(--teal);box-shadow:var(--shadow-lift)} @media (hover:hover){.faq-short:hover .faq-short-media{border-color:var(--teal);box-shadow:var(--shadow-lift)}} .faq-short:focus-visible{outline:2px solid var(--teal-deep);outline-offset:4px;border-radius:var(--r-tile)} /* Three across at every width - stacked they would be nearly 700px tall each. */ @media (max-width:959px){.faq-layout{gap:28px}.faq-shorts{gap:12px}} /* ---------- Contact: Miro's bright full-bleed signup band ---------- */ .section-contact{background:var(--teal)} .section-contact h2,.section-contact .section-sub,.section-contact p, .section-contact h3,.section-contact a{color:var(--ink)} .contact-grid{display:grid;gap:36px} /* The form carries far more content than the copy beside it, so its column is 150px wider: the copy column is sized explicitly and the form takes the rest. The bump is divided by the page's 85% zoom so it lands as 150 rendered px, which is what the value means to anyone looking at the page. */ @media (min-width:960px){.contact-grid{--form-bump:calc(190px / .85);gap:56px; grid-template-columns:minmax(0,calc((100% - 56px - var(--form-bump)) / 2)) minmax(0,1fr)}} .lead-form{background:var(--surface);border-radius:var(--r-card);padding:32px; box-shadow:var(--shadow-lift)} .form-title{font-weight:700;font-size:24px;letter-spacing:-.02em;margin-bottom:6px;color:var(--ink)} .form-hint{color:var(--caption);font-size:15px;margin-bottom:24px} .req{color:#c0392b} .row2{display:grid;gap:16px} @media (min-width:520px){.row2{grid-template-columns:1fr 1fr}} .field{margin:0 0 16px} .field label{display:block;margin-bottom:8px;font-size:15px;font-weight:500;color:var(--ink)} .field input,.field textarea{width:100%;min-height:52px;padding:12px 20px; border:2px solid var(--hairline);border-radius:var(--r-pill);background:var(--canvas); color:var(--ink);font:inherit;font-size:16px;transition:border-color .18s var(--ease)} .field textarea{border-radius:var(--r-tile);min-height:130px;resize:vertical} .field input:hover,.field textarea:hover{border-color:var(--muted)} .field input:focus-visible,.field textarea:focus-visible{border-color:var(--teal-deep)} .field [aria-invalid="true"]{border-color:#c0392b} .field-msg{display:block;margin-top:6px;color:#c0392b;font-size:14px} .form-error{margin:0 0 16px;color:#c0392b;font-size:15px} .form-success{margin:16px 0 0;color:var(--teal-deep);font-size:15px} .form-note{color:var(--caption);font-size:15px;margin:16px 0 0} .offices{list-style:none;padding:0;margin:32px 0 0;display:grid;gap:20px} /* Two columns, so the three offices fall into two rows: across one row each address wrapped to three cramped lines against the form beside it. */ @media (min-width:640px){.offices{grid-template-columns:repeat(2,1fr);gap:24px 32px}} .offices h3{font-size:16px;font-weight:700;margin-bottom:6px} .offices p{font-size:15px;margin:0} /* Social links are icon-only, so each carries an aria-label and the row keeps a visible "Follow us:" lead-in for sighted users. Targets are 40px, comfortably past the 24px minimum. */ .follow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:78px; color:var(--caption);font-size:16px;line-height:1.5;letter-spacing:normal} .follow-label{margin-right:2px} .follow a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%; transition:background-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease)} .follow a svg{width:19px;height:19px} @media (hover:hover){.follow a:hover{transform:translateY(-2px)}} @media (prefers-reduced-motion:reduce){.follow a{transition:none}} .follow a{border:1px solid var(--hairline);background:var(--canvas);color:var(--teal-deep)} /* Fills with ink, not teal: this block sits on .section-contact, which is teal, so a teal hover fill made the icon vanish into the background. */ @media (hover:hover){.follow a:hover{background:var(--ink);border-color:var(--ink);color:#fff}} /* ---------- Footer ---------- */ .site-footer{background:var(--ink);color:#c9c9c9;padding:44px 0 22px;font-size:15px} .footer-grid{display:grid;gap:26px 32px} @media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}} /* Four columns rather than three: the six blocks then fill two rows instead of spilling into a third, which is most of the height saving on its own. */ @media (min-width:1000px){.footer-grid{grid-template-columns:repeat(4,1fr)}} .footer-h{color:#fff;font-size:16px;font-weight:700;margin-bottom:9px} .site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:6px} /* The role and industry lists are unlinked labels, so they can wrap inline as tags. Ten stacked rows per column was the bulk of the footer's height. */ /* No separator dots: the wider gap alone keeps the tags legible as a list. */ .footer-tags{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;line-height:1.5} .site-footer a{color:#c9c9c9;text-decoration:none;transition:color .18s var(--ease)} .site-footer a:hover{color:var(--teal)} .footer-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; margin-top:32px;padding-top:18px;border-top:1px solid #ffffff26;color:#9a9a9a} /* ---------- Sticky mobile CTA ---------- */ .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:12px var(--gutter); background:rgba(247,244,238,.94);backdrop-filter:blur(12px);border-top:1px solid var(--hairline); opacity:0;visibility:hidden;transform:translateY(100%);pointer-events:none; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s} @media (max-width:819px){.sticky-cta.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}} @media (min-width:820px){.sticky-cta{display:none}} /* ---------- Scroll reveal ---------- */ .js-reveal [data-reveal]{opacity:0;transform:translateY(16px); transition:opacity .55s var(--ease),transform .55s var(--ease); transition-delay:var(--reveal-delay,0ms)} .js-reveal [data-reveal].is-in{opacity:1;transform:none} .js-reveal [data-reveal-group]>*{opacity:0;transform:translateY(16px); transition:opacity .55s var(--ease),transform .55s var(--ease); transition-delay:var(--reveal-delay,0ms)} .js-reveal [data-reveal-group].is-in>*{opacity:1;transform:none} /* Complete market columns arrive one by one, preserving Miro B's existing light palette and Vietnam highlight. Every cell in a market shares a delay so it reads as one pricing-plan-style card, not a set of animated table rows. */ .js-reveal [data-column-reveal] :is(thead th,tbody td){opacity:0;transform:translateY(-18px); filter:blur(7px);will-change:transform,opacity,filter; transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)} .js-reveal [data-column-reveal] :is(thead th,tbody td):nth-child(1){transition-delay:0ms} .js-reveal [data-column-reveal] :is(thead th,tbody td):nth-child(2){transition-delay:150ms} .js-reveal [data-column-reveal] :is(thead th,tbody td):nth-child(3){transition-delay:300ms} .js-reveal [data-column-reveal] :is(thead th,tbody td):nth-child(4){transition-delay:450ms} .js-reveal [data-column-reveal].is-in :is(thead th,tbody td){opacity:1;transform:none;filter:none} @media (prefers-reduced-motion:reduce){ .js-reveal [data-reveal], .js-reveal [data-reveal-group]>*, .js-reveal [data-column-reveal] :is(thead th,tbody td){opacity:1!important;transform:none!important;filter:none!important;transition:none!important} } /* Printing never scrolls, so reveal targets would print blank. */ @media print{ .js-reveal [data-reveal], .js-reveal [data-reveal-group]>*, .js-reveal [data-column-reveal] :is(thead th,tbody td){opacity:1!important;transform:none!important;filter:none!important} .site-header,.sticky-cta,.announce{position:static} } @media (forced-colors:active){ .btn,.chips li,.factlist li,.quote,.faq details,.tag{border:1px solid CanvasText} .hl{background-image:none;text-decoration:underline} } /* ---------- Mobile ---------- */ @media (max-width:599px){ .hero{padding:40px 0 56px} h1{font-size:51px;line-height:1.02;letter-spacing:-.035em} .hero .lede{font-size:17px;line-height:1.45} .hero .cta-row{flex-wrap:nowrap;gap:10px;margin-top:26px} .hero .cta-row .btn{flex:0 1 auto;min-width:0;padding:10px 18px;font-size:15px;line-height:1.25} /* Now the only home for the 200+ proof point and its icon, so it stays on mobile. */ .hero .cta-note{align-items:flex-start;font-size:15px} .starter{padding:28px} .starter-lead{font-size:22px} } /* Conversational qualification flow */ .convo-form{display:flex;flex-direction:column;padding:28px;background:var(--surface);border:2px solid var(--ink);border-radius:var(--r-tile);box-shadow:var(--shadow-card)}.convo-progress{display:flex;align-items:center;gap:12px;margin-bottom:32px;color:var(--caption);font-size:13px}.convo-progress>div{flex:1;height:4px;background:#d7d2c9;border-radius:99px;overflow:hidden}.convo-progress i{display:block;width:14.3%;height:100%;background:var(--teal);border-radius:inherit;transition:width .24s var(--ease)}.convo-step{margin:0;border:0;padding:0}/* Every question step reserves the height of the tallest one, so the card holds one size all the way through instead of resizing on each answer. 440px is the tallest step measured in layout px; the hero's 85% zoom renders it at ~374. The floor starts at 700px because on a phone the tallest step is ~690px, and holding every step to that would strand short questions above dead space. The booking step is exempt - it carries a 550px calendar. */@media (min-width:700px){.convo-step:not(.convo-booking){min-height:451px}}.convo-step legend{display:block;margin-bottom:28px;max-width:none;color:var(--ink);font-size:clamp(28px,3.2vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.04em}.convo-help,.convo-booking>p{max-width:50ch;margin:-10px 0 26px;color:var(--caption);font-size:16px;line-height:1.5}.convo-kicker{margin:0 0 8px!important;color:var(--teal-deep)!important;font-size:13px!important;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.convo-booking h3{font-size:clamp(28px,3.2vw,42px);letter-spacing:-.04em} .convo-intents,.convo-options{display:grid;gap:10px}.convo-intents{grid-template-columns:repeat(2,minmax(0,1fr))}.convo-intents label,.convo-options label{position:relative;display:block;cursor:pointer;border:2px solid var(--ink);border-radius:var(--r-tile);background:var(--surface);color:var(--ink);padding:18px;transition:border-color .2s var(--ease),background-color .2s var(--ease),box-shadow .2s var(--ease)}.convo-intents label{min-height:174px;padding-top:28px}.convo-intents strong{display:block;font-size:19px;line-height:1.28;letter-spacing:-.02em}.convo-intents span{display:block;margin-top:12px;color:var(--caption);font-size:14px;line-height:1.45}@media(hover:hover){.convo-intents label:hover{border-color:var(--teal);background:var(--teal-tint)}}.convo-options{grid-template-columns:repeat(2,minmax(0,1fr))}.convo-options label{font-size:16px;font-weight:700}.convo-options label:has(input:checked),.convo-intents label:has(input:checked){border-color:var(--teal-deep);background:#c9fff8;box-shadow:inset 0 0 0 1px var(--teal-deep)}.convo-intents input,.convo-options input{position:absolute;opacity:0}.convo-intents label:focus-within,.convo-options label:focus-within{outline:2px solid var(--teal-deep);outline-offset:3px}.convo-checks{grid-template-columns:repeat(3,minmax(0,1fr))}.convo-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px}.convo-back{border:0;background:transparent;color:var(--caption);font:inherit;font-weight:700;cursor:pointer;padding:10px 0}.convo-back:hover{color:var(--ink)}.convo-back:focus-visible{outline:2px solid var(--teal-deep);outline-offset:4px;border-radius:4px}.convo-error{margin:16px 0 0;color:var(--ink);font-size:14px}.convo-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.convo-fields label{display:grid;gap:6px;color:var(--ink);font-size:14px;font-weight:700}.convo-fields label:last-child{grid-column:span 2}.convo-fields input,.convo-fields select{width:100%;min-height:48px;padding:10px 14px;border:2px solid var(--ink);border-radius:var(--r-tile);background:var(--surface);color:var(--ink);font:inherit}.convo-fields input:focus-visible,.convo-fields select:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px}.convo-privacy{margin:20px 0 0;color:var(--caption);font-size:13px;line-height:1.45}.convo-privacy a{color:var(--ink)}/* The frame's own chrome cannot be restyled - it is cross-origin - so the shell around it carries the site's surface, border and radius, and the embed sits flush inside rather than looking pasted on. */.meetings-iframe-container{min-height:550px;margin-top:22px;border:2px solid var(--ink);border-radius:var(--r-tile);overflow:hidden;background:var(--surface)}.meetings-iframe-container iframe{display:block;border:0}/* Skeleton while HubSpot's script fetches availability: the embed renders nothing until then, which read as the form having broken. */.meetings-iframe-container.is-loading{position:relative}.meetings-iframe-container.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--surface) 0%,var(--canvas-warm) 50%,var(--surface) 100%);background-size:200% 100%;animation:cal-skeleton 1.4s ease-in-out infinite}@keyframes cal-skeleton{from{background-position:200% 0}to{background-position:-200% 0}}@media (prefers-reduced-motion:reduce){.meetings-iframe-container.is-loading::after{animation:none;opacity:.6}}.convo-booking{padding-top:0} .convo-booking{padding-top:0}@media(max-width:699px){.convo-form{padding:20px}.convo-intents,.convo-options,.convo-checks,.convo-fields{grid-template-columns:1fr}.convo-intents label{min-height:0}.convo-fields label:last-child{grid-column:auto}.convo-step legend{font-size:32px}.meetings-iframe-container{min-height:620px}}@media(max-width:699px){.contact-grid>div:first-child{order:2}.convo-form{order:1}}@media(prefers-reduced-motion:reduce){.convo-progress i,.convo-intents label,.convo-options label{transition:none}} /* Two figures in the Vietnam column carry an explanation: what the number actually measures and where it comes from. The trigger is a real button so it is reachable by keyboard, and aria-describedby ties the text to it, so the tooltip is announced rather than being hover-only trivia. */ .info{position:relative;display:inline-flex;vertical-align:middle;margin-left:7px} .info-btn{display:grid;place-items:center;width:20px;height:20px;padding:0; border:1.5px solid currentColor;border-radius:50%;background:none;color:inherit; opacity:.62;cursor:pointer;transition:opacity .18s var(--ease)} .info-btn svg{width:13px;height:13px} .info-btn:hover,.info-btn:focus-visible{opacity:1} /* Opens upward: both rows sit low in the table, and the scroll container clips vertically, so downward would be cut off. */ /* Anchored to the button's left edge, not centred on it: both triggers sit in the leftmost column, where a centred tooltip hangs off the left of a phone screen. Extending rightward it has the whole table to spill into. */ .tip{position:absolute;bottom:calc(100% + 9px);left:-4px;z-index:5; width:max-content;max-width:min(250px,calc(100vw - 28px));padding:10px 12px; border-radius:10px;background:#06201ff5;color:#eafffb; font-size:12.5px;line-height:1.45;letter-spacing:normal;text-transform:none; box-shadow:0 12px 28px #00000059; opacity:0;visibility:hidden;transition:opacity .16s var(--ease),visibility .16s var(--ease)} .tip::after{content:"";position:absolute;top:100%;left:8px; border:6px solid transparent;border-top-color:#06201ff5} .info-btn:hover+.tip,.info-btn:focus-visible+.tip,.info:hover .tip{opacity:1;visibility:visible} /* On narrow screens there is no room to spill sideways, so the tooltip drops its button-relative anchor and spans the cell instead (the Vietnam cells are already position:relative for the gradient layering). Taller, but never clipped. */ @media (max-width:900px){ .info{position:static} .tip{left:14px;right:14px;width:auto;max-width:none} .tip::after{left:auto;right:22px} } @media (prefers-reduced-motion:reduce){.tip{transition:none}} /* ---------- Quick answer shorts ---------- */ /* Phones retain the touch-friendly snapping row. At desktop widths all five cards fit the shared rail, preventing the last card from clipping off-page. */ .faq-shorts-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:16px; max-width:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px} @media (min-width:960px){ .faq-shorts-track{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;scroll-snap-type:none} } .faq-shorts-track::-webkit-scrollbar{height:6px} .faq-shorts-track::-webkit-scrollbar-thumb{background:var(--hairline);border-radius:3px} .faq-shorts-track .faq-short{scroll-snap-align:start} .faq-short-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Playing in place: hide the static image and title behind the iframe. */ .faq-short.is-playing .faq-short-title{display:none} /* Full-screen reels pager, mobile only. */ .shorts-viewer{position:fixed;inset:0;z-index:80} .shorts-viewer[hidden]{display:none} .shorts-scrim{position:absolute;inset:0;background:#000} .shorts-stage{position:absolute;inset:0} .shorts-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:12px;z-index:2; display:flex;align-items:center;justify-content:center;width:44px;height:44px; border:0;border-radius:50%;background:#00000099;color:#fff;cursor:pointer} .shorts-close svg{width:22px;height:22px} .shorts-close:focus-visible{outline:2px solid #fff;outline-offset:2px} /* One video per viewport-height panel, snapping like a reels feed. */ .shorts-reel{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;-webkit-overflow-scrolling:touch; overscroll-behavior:contain} .shorts-slide{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always; display:flex;align-items:center;justify-content:center;background:#000} .shorts-slide iframe{width:100%;height:100%;border:0} .shorts-caption{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 20px); padding:0 20px;color:#fff;font-size:17px;font-weight:600;line-height:1.35; text-shadow:0 1px 12px #000c;pointer-events:none} body.shorts-open{overflow:hidden} @media (prefers-reduced-motion:reduce){.shorts-reel{scroll-behavior:auto}} /* ---------- Custom booking step (Version B) ---------- Our own slot picker, fed by the /api/booking proxy, in this variant's Miro language: 2px ink borders, hard rounding, no shadow until interaction. It lives beside the HubSpot embed rather than replacing it in markup, so a fallback never leaves an empty bordered box behind. */ .convo-booking:has([data-booking]:not([hidden]),[data-booking-confirm]:not([hidden]),[data-booking-confirmed]:not([hidden])) .meetings-iframe-container{display:none} .booking{margin-top:22px;border:2px solid var(--ink);border-radius:var(--r-card);background:var(--surface);padding:20px} .booking-head{display:flex;align-items:center;justify-content:space-between;gap:12px} .booking-month{margin:0;color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.02em} .booking-month-nav{width:42px;height:42px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:16px;line-height:1;cursor:pointer;transition:background-color .2s var(--ease),transform .2s var(--spring)} .booking-month-nav:hover:not(:disabled){background:var(--teal-tint);transform:translateY(-1px)} .booking-month-nav:disabled{opacity:.3;cursor:not-allowed} .booking-month-nav:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px} .booking-zone{margin:10px 0 0;color:var(--caption);font-size:13px} /* auto-fill rather than a fixed 7-column month grid: the API returns only days that actually have openings, so a full month would be mostly empty cells. */ .booking-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;margin-top:18px} .booking-day{display:grid;gap:2px;padding:12px 8px;border:2px solid var(--ink);border-radius:var(--r-tile);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;text-align:center;transition:background-color .2s var(--ease),box-shadow .2s var(--ease)} .booking-day:hover{background:var(--teal-tint);box-shadow:var(--shadow-card)} .booking-day.is-selected{background:#c9fff8;border-color:var(--teal-deep);box-shadow:inset 0 0 0 1px var(--teal-deep)} .booking-day:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px} .booking-day-name{color:var(--caption);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em} .booking-day-num{font-size:23px;font-weight:700;line-height:1.1;letter-spacing:-.02em} .booking-day-count{color:var(--muted);font-size:11px} .booking-slots{margin-top:22px;padding-top:18px;border-top:2px solid var(--hairline)} .booking-slots-title{margin:0 0 12px;color:var(--ink);font-size:15px;font-weight:700} .booking-slot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px} .booking-slot{min-height:46px;padding:10px 12px;border:2px solid var(--ink);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;transition:background-color .2s var(--ease),transform .2s var(--spring)} .booking-slot:hover:not(:disabled){background:var(--teal);transform:translateY(-1px)} .booking-slot:disabled{opacity:.4;cursor:progress} .booking-slot.is-booking{background:var(--teal-tint);opacity:1} .booking-slot:focus-visible{outline:2px solid var(--teal-deep);outline-offset:3px} .booking-status{margin:16px 0 0;color:var(--caption);font-size:14px} .booking-status[data-tone=error]{color:var(--ink);font-weight:700} .booking-status[data-tone=busy]::after{content:"";display:inline-block;width:6px;height:6px;margin-left:8px;border-radius:50%;background:var(--teal-deep);animation:booking-pulse 1s ease-in-out infinite} @keyframes booking-pulse{0%,100%{opacity:.25}50%{opacity:1}} .booking.is-loading .booking-grid{opacity:.4} .booking.is-confirmed .booking-head,.booking.is-confirmed .booking-zone{display:none} .booking-confirmed{text-align:center;padding:12px 4px 4px} .booking-confirmed:focus{outline:none} .booking-confirmed:focus-visible{outline:2px solid var(--teal-deep);outline-offset:6px;border-radius:var(--r-tile)} .booking-confirmed p.booking-confirmed-mark{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 14px;border:2px solid var(--ink);border-radius:50%;background:var(--teal-tint);color:var(--teal-deep);font-size:24px;line-height:1} .booking-confirmed h4{margin:0 0 8px;color:var(--ink);font-size:25px;font-weight:700;letter-spacing:-.03em} .booking-confirmed p{margin:0;color:var(--body);font-size:16px} .booking-confirmed-note{margin-top:8px!important;color:var(--caption)!important;font-size:14px!important} @media(max-width:699px){.booking{padding:16px}.booking-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}.booking-slot-list{grid-template-columns:repeat(auto-fill,minmax(94px,1fr))}} @media(prefers-reduced-motion:reduce){.booking-month-nav,.booking-day,.booking-slot{transition:none}.booking-month-nav:hover:not(:disabled),.booking-slot:hover:not(:disabled){transform:none}.booking-status[data-tone=busy]::after{animation:none;opacity:.8}} /* [hidden] loses to the display rules above, so the day grid and slot list are told explicitly to leave the layout - without this the calendar stays on screen underneath the confirmed state. */ .booking[hidden],.booking-grid[hidden],.booking-slots[hidden],.booking-slot-list[hidden],.booking-confirmed[hidden],.booking-status[hidden]{display:none} /* ---------- Booking confirmation panel (Version B) ---------- Sits between choosing a time and sending it. Nothing is booked until the visitor confirms here, and it collects name/email when the "ready to grow" shortcut skipped the details step. */ .booking-confirm{margin-top:18px;padding:18px;border:2px solid var(--teal-deep);border-radius:var(--r-tile);background:var(--teal-tint)} .booking-confirm[hidden]{display:none} .booking-confirm:focus{outline:none} .booking-confirm-kicker{margin:0 0 6px;color:var(--teal-deep);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em} .booking-confirm-when{margin:0;color:var(--ink);font-size:19px;font-weight:700;letter-spacing:-.02em} .booking-confirm-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px} .booking-confirm-fields[hidden]{display:none} .booking-confirm-fields label{display:grid;gap:6px;color:var(--ink);font-size:13px;font-weight:700} .booking-confirm-fields input{width:100%;min-height:46px;padding:10px 14px;border:2px solid var(--ink);border-radius:var(--r-tile);background:var(--surface);color:var(--ink);font:inherit} .booking-confirm-fields input:focus-visible{outline:2px solid var(--teal-deep);outline-offset:2px} .booking-confirm-error{margin:12px 0 0;color:var(--ink);font-size:14px} .booking-confirm-error[hidden]{display:none} .booking-confirm-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px} .booking-change{border:0;background:transparent;color:var(--caption);font:inherit;font-weight:700;cursor:pointer;padding:10px 0} .booking-change:hover{color:var(--ink)} .booking-change:focus-visible{outline:2px solid var(--teal-deep);outline-offset:4px;border-radius:4px} .booking-slot.is-selected{background:var(--teal);border-color:var(--teal-deep)} @media(max-width:699px){.booking-confirm-fields{grid-template-columns:1fr}.booking-confirm-actions{flex-direction:column-reverse;align-items:stretch}} /* ---------- Booking step, compact pass (Version B) ---------- Tightens the vertical rhythm so the calendar, times and confirmation fit without scrolling: six times per row, shorter day tiles, and the confirm action inline with the time it confirms. */ .convo-booking .convo-kicker{margin-bottom:2px!important} .convo-booking h3{margin-top:0;margin-bottom:6px} .convo-booking>p{margin:0 0 14px} .booking{padding:16px;margin-top:14px} .booking-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:8px;margin-top:14px} .booking-day{padding:8px 6px} .booking-day-num{font-size:20px} .booking-day-name{font-size:11px} .booking-slots{margin-top:16px;padding-top:14px} /* Six per row: the times are short, so narrower tracks fit without truncating. */ .booking-slot-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .booking-slot{min-height:40px;padding:8px 6px;font-size:14px} .booking-confirm{margin-top:14px;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .booking-confirm-text{min-width:0} .booking-confirm-when{font-size:17px} .booking-confirm-go{flex:none} /* The name/email pair, when the shortcut skipped them, takes the full width below the row rather than squeezing the action off screen. */ .booking-confirm-fields{flex-basis:100%;margin-top:4px} .booking-confirm-error{flex-basis:100%;margin-top:0} @media(max-width:820px){.booking-slot-list{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:699px){.booking-slot-list{grid-template-columns:repeat(3,minmax(0,1fr))}.booking-confirm{flex-direction:column;align-items:stretch}.booking-confirm-go{width:100%}} /* Booking step sits 6px tighter under the progress meter than the question steps: it opens on a kicker rather than a full-size legend, so the same gap reads as looser here. */ .convo-step.convo-booking{margin-top:-6px} @media (max-width:640px){.privacy-panel{padding:8px}.privacy-panel-card{gap:8px 12px;padding:10px 14px;border-radius:14px}.privacy-panel-card h2{font-size:.85rem}.privacy-panel-card p{font-size:.75rem;line-height:1.35;flex:1 1 100%}.privacy-panel-card label{font-size:.8rem}.privacy-panel-actions{flex:1 1 auto;justify-content:flex-start}.privacy-panel-actions .btn{padding:7px 14px;font-size:.8rem}} /* ---------- Mobile-only adjustments ---------- */ .m-only{display:none} @media (max-width:599px){ .m-hide{display:none} .m-only{display:inline} /* H2s one size up; the copy under them one size down. */ h2{font-size:34px} .section-sub{font-size:19px} /* Only the first two hero stats survive on phones: four cards pushed the fold past the CTA. */ .hero .statbar>div:nth-child(n+3){display:none} /* 1px off each cell's vertical padding fits more rows on screen. */ .compare td{padding-block:21px} /* Comparison table header: flag stacks above the country name, no inner bottom padding under the name. */ .compare thead th{padding-bottom:0} .compare thead th img{display:block;margin:0 0 8px} .scroll-hint{display:none} } /* Steps remain one column through 819px, so keep the compact number/day row across that entire mobile range rather than only narrow phones. */ @media (max-width:819px){ /* 28px base, 16px off the top and bottom inner padding only. Third column is the CTA's; it collapses to zero on the four cards without one. */ #how .steps li{display:grid;grid-template-columns:44px minmax(0,1fr) auto;column-gap:12px;padding-block:12px;position:relative} /* Room in the gap for the arrow between the cards, 1px tighter on each side. */ #how .steps{gap:32px} #how .steps li>*{grid-column:1/-1} /* Timeframe over title, both beside the numeral: the circle spans the pair and centres against it, so all three share one optical centre line. */ #how .steps li .step-num{grid-column:1;grid-row:1/3;align-self:center;margin-bottom:0} #how .steps li .step-eta{grid-column:2/-1;grid-row:1;align-self:end;margin:0} #how .steps li h3{grid-column:2/-1;grid-row:2;align-self:start;margin:2px 0 0} /* Body copy and CTA hang off the title's edge, not the numeral's. The copy sits tight under its title. */ #how .steps li>:nth-child(n+4){grid-column:2;grid-row:3;margin-top:6px} /* CTA shares the copy's row at the card's right edge: "No obligation." is short enough that a full row to itself was mostly empty space. */ #how .steps li .btn{grid-column:3;grid-row:3;justify-self:end;align-self:center;margin-top:6px;min-height:38px;padding-block:0} /* The desktop lead line runs right from the numeral; on mobile that space is taken by the timeframe, so the rule continues from the end of that word instead - same row, same reading, no absolute positioning needed. */ #how .steps li:not(:last-child) .step-eta{display:flex;align-items:center;gap:12px} #how .steps li:not(:last-child) .step-eta::after{content:"";flex:1;height:1px;background:var(--hairline)} /* Flow arrow in the gap below each card, pointing at the next one. Drawn as a mask so it takes the button teal rather than shipping a second coloured copy of the file, and rotated because the source glyph points right. The last step has nothing to point to, so it goes without - same rule as the lead line. */ #how .steps li:not(:last-child)::after{content:"";position:absolute;top:100%;left:calc(50% - 22px); width:44px;height:32px;background:var(--teal);transform:rotate(90deg);transform-origin:center; -webkit-mask:var(--flow-arrow) center/16px no-repeat;mask:var(--flow-arrow) center/16px no-repeat} } /* Swipe-hint finger over the comparison table; hidden once scrolling starts. */ .table-swipe{position:relative} .swipe-hint{display:none} @media (max-width:599px){ /* The table is far taller than the phone screen, so the icon anchors near the top - the first thing in view - rather than the geometric middle. */ .swipe-hint{position:absolute;inset:0 0 auto;height:560px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3} .swipe-hint svg{width:52px;height:52px;color:var(--ink);filter:drop-shadow(0 2px 10px #fffffff2) drop-shadow(0 0 3px #ffffff);animation:swipe-nudge 1.6s ease-in-out infinite} .table-swipe.is-scrolled .swipe-hint{display:none} } @keyframes swipe-nudge{0%,100%{transform:translateX(16px)}50%{transform:translateX(-16px)}} @media (prefers-reduced-motion:reduce){.swipe-hint svg{animation:none}}