/* Homepage identity (owner, 2026-11-10): "I love C the most. I love the
   showcasing of B. I love the grid of A."
   C, The Cut: an amber field, black type with "Work less." in outline, and a
     black slash at the V mark's own angle (24.4 degrees, from the logo polygons).
   B, Before/After: a drag-to-compare showcase right under the hero.
   A, Blueprint: a 24px grid on paper and on black.
   Loaded after tiles.css on the homepage only. CSS plus one small script for the
   slider; no loading screen, native scroll, every word real text. No numbered or
   pill section labels, no giant footer word (owner rules). */
:root { --v-amber:#F2A93B; --v-ink:#0B0B0C; --v-paper:#F3EFE6; }

/* A: the blueprint grid on tiles lives in tiles.css (sitewide). */
body::after { content:''; position:fixed; inset:0; z-index:2147483000; pointer-events:none; opacity:0.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- C: the hero ---------- */
.home-hero { text-align:left; position:relative; isolation:isolate; padding:56px max(24px, calc((100% - var(--container-width)) / 2 + 22px)) 0;
  background-color:#F2A93B; background-image:linear-gradient(90deg, rgba(11,11,12,0.07) 1px, transparent 1px), linear-gradient(rgba(11,11,12,0.07) 1px, transparent 1px); background-size:24px 24px;
  --tile-fg:var(--v-ink); --tile-muted:rgba(11,11,12,0.78); --tile-link:var(--v-ink); color:var(--v-ink); }
.home-hero > * { position:relative; z-index:1; }
.home-slash { position:absolute !important; z-index:0 !important; top:0; right:0; width:10vw; height:58%; background:var(--v-ink); transform:skewX(-24.4deg); transform-origin:top; animation:v-draw 0.7s cubic-bezier(0.2, 0.7, 0.1, 1) 0.15s both; }
/* 3: on load the slash draws itself down and the black band cuts open beneath the devices. */
@keyframes v-open { from { clip-path:polygon(0 100%, 100% 100%, 100% 100%, 0 100%); } }
.home-hero::after { content:''; position:absolute; z-index:0; left:0; right:0; bottom:0; height:clamp(200px, 30vw, 440px); background-color:var(--v-ink);
  background-image:linear-gradient(90deg, rgba(245,245,247,0.06) 1px, transparent 1px), linear-gradient(rgba(245,245,247,0.06) 1px, transparent 1px); background-size:24px 24px;
  clip-path:polygon(0 24%, 100% 0, 100% 100%, 0 100%); animation:v-open 0.8s cubic-bezier(0.2, 0.7, 0.1, 1) 0.35s both; }
.home-status { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; line-height:1.3; margin:0 0 24px; color:var(--v-ink); }
.home-status span { width:9px; height:9px; border-radius:50%; background:var(--v-ink); box-shadow:0 0 0 4px rgba(11,11,12,0.14); flex:none; }
.home-hero .hero-headline { margin:0; max-width:none; color:var(--v-ink); font-size:clamp(52px, 10.4vw, 152px); font-weight:850; font-stretch:112.5%; letter-spacing:-0.05em; line-height:0.88; }
.home-hero .hero-tagline > span { text-wrap:nowrap; animation:home-rise 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) both; }
.home-hero .hero-tagline > span + span { animation-delay:0.1s; color:transparent; -webkit-text-stroke:clamp(1.5px, 0.22vw, 3px) var(--v-ink); }
@supports not (-webkit-text-stroke: 1px black) { .home-hero .hero-tagline > span + span { color:var(--v-ink); } }
@keyframes home-rise { from { opacity:0; transform:translateY(0.22em); } }
.home-hero .hero-sub { margin:28px 0 0; max-width:34ch; color:rgba(11,11,12,0.82); font-size:clamp(19px, 1.7vw, 24px); line-height:1.35; text-wrap:pretty; }
.home-hero .tile-links { justify-content:flex-start; margin:32px 0 0; }
.home-hero .btn-pill { background-color:#0B0B0C; color:#F5F5F7; }
.home-hero .btn-pill:hover { background-color:#2a2a2d; }
.home-hero a.tile-link { color:var(--v-ink); font-weight:600; }
.home-hero .device-cluster { margin:64px auto 0; }
@media (max-width: 733px) {
  .home-slash { right:4%; width:12vw; height:88px; }
  .home-hero::after { height:clamp(180px, 58vw, 300px); clip-path:polygon(0 18%, 100% 0, 100% 100%, 0 100%); }
}

/* ---------- B: the showcase ---------- */
.tile-grid > .showcase { padding-bottom:48px; }
.showcase-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:20px 40px; width:100%; }
.tile-grid .tile-headline .line { display:block; text-wrap:balance; }
.tile-grid .tile-headline .mark { background:linear-gradient(transparent 62%, var(--v-amber) 62%); padding:0 0.06em; }
.showcase-side { max-width:none; font-size:19px; line-height:1.4; margin:16px 0 0; }
.showcase-side span { display:block; }
@media (min-width: 734px) { .showcase-side span { white-space:nowrap; } }
.ba-compare { --x:40%; position:relative; align-self:stretch; height:clamp(380px, 46vw, 540px); margin-top:32px; border-radius:16px; overflow:hidden; border:1px solid rgba(11,11,12,0.14); box-shadow:0 40px 80px -40px rgba(0,0,0,0.4); text-align:left; }
.ba-compare .shot { position:absolute; inset:0; display:flex; flex-direction:column; }
.ba-compare .bar { height:34px; flex:none; display:flex; align-items:center; gap:7px; padding:0 14px; background:#ECECEC; border-bottom:1px solid #DDD; }
.ba-compare .bar i { width:11px; height:11px; border-radius:50%; background:#CCC; }
.ba-compare .bar b { margin-left:12px; font-size:12px; font-weight:500; color:#555; background:#FFF; border-radius:6px; padding:3px 10px; }
.ba-compare .old { flex:1; background:#FDFDF7; color:#222; font-family:"Times New Roman", Times, serif; padding:18px 26px; }
.ba-compare .old h3 { font-size:30px; color:#003399; text-align:center; margin:0; }
.ba-compare .old .tick { display:block; background:#FFFF99; color:#C00; font-size:14px; margin:10px 0; padding:3px; text-align:center; }
.ba-compare .old .cols { display:grid; grid-template-columns:130px 1fr; gap:16px; margin-top:10px; }
.ba-compare .old ul { font-size:13px; line-height:1.7; padding-left:16px; margin:0; color:#00E; text-decoration:underline; }
.ba-compare .old p { font-size:14px; line-height:1.3; margin:0 0 8px; color:#222; }
.ba-compare .old small { font-size:11px; color:#888; }
.ba-compare .after { clip-path:inset(0 0 0 var(--x)); }
.ba-compare .new { flex:1; position:relative; overflow:hidden; background:var(--v-ink); color:#FFF; padding:64px 40px 30px 44%; display:flex; flex-direction:column; justify-content:center; }
.ba-compare .new::before { content:''; position:absolute; top:-10%; right:14%; width:12%; height:70%; background:var(--v-amber); transform:skewX(-24.4deg); }
.ba-compare .new > * { position:relative; }
.ba-compare .new .nav { position:absolute; top:18px; left:44%; right:28px; display:flex; justify-content:space-between; align-items:center; font-size:13px; font-weight:800; letter-spacing:0.04em; }
.ba-compare .new .nav span { background:var(--v-amber); color:var(--v-ink); padding:7px 14px; border-radius:999px; letter-spacing:0; }
.ba-compare .new strong { display:block; font-size:clamp(28px, 3.4vw, 50px); font-weight:850; font-stretch:112.5%; letter-spacing:-0.04em; line-height:0.95; max-width:12ch; color:#FFF; }
.ba-compare .new p { color:#C9C9CE; font-size:15px; margin:14px 0 18px; max-width:32ch; }
.ba-compare .new .go { align-self:flex-start; background:var(--v-amber); color:var(--v-ink); padding:11px 18px; border-radius:999px; font-weight:700; font-size:14px; }
.ba-compare .tag { position:absolute; bottom:16px; z-index:3; font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:6px 10px; border-radius:6px; background:rgba(0,0,0,0.75); color:#FFF; }
.ba-compare .tag.l { left:16px; } .ba-compare .tag.r { right:16px; background:var(--v-amber); color:var(--v-ink); }
.ba-compare .split { position:absolute; top:0; bottom:0; left:var(--x); width:0; z-index:4; pointer-events:none; }
.ba-compare .split::before { content:''; position:absolute; top:0; bottom:0; left:-1.5px; width:3px; background:var(--v-amber); }
.ba-compare .knob { position:absolute; top:50%; left:-30px; width:60px; height:60px; margin-top:-30px; border-radius:50%; background:var(--v-ink); display:grid; place-items:center; box-shadow:0 10px 30px rgba(0,0,0,0.35); }
.ba-compare .knob svg { width:30px; height:26px; }
.ba-compare input { position:absolute; inset:0; z-index:5; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ba-compare input:focus-visible + .split .knob { outline:3px solid var(--v-ink); outline-offset:3px; }
.showcase-note { font-size:13px; margin:12px 0 0; }
@media (max-width: 733px) {
  .ba-compare { --x:28%; height:440px; }
  .ba-compare .new { padding:60px 16px 18px 32%; }
  .ba-compare .new .nav { left:32%; right:12px; } .ba-compare .new .nav b { display:none; }
  .ba-compare .new strong { font-size:26px; } .ba-compare .new p { font-size:13px; }
  .ba-compare .old .cols { grid-template-columns:1fr; }
}

/* ---------- Tiles: left-aligned, bigger type ---------- */
.tile-grid > .tile { align-items:flex-start; text-align:left; padding:56px clamp(24px, 4vw, 56px) 0; }
.tile-grid .tile-eyebrow, .tile-grid .tile-headline, .tile-grid .tile-subline { margin-left:0; margin-right:0; }
.tile-grid .tile-links { justify-content:flex-start; margin:24px 0 0; }
.tile-grid .tile-headline { font-size:clamp(36px, 9.6vw, 48px); letter-spacing:-0.035em; line-height:1.02; }
.tile-grid .tile-eyebrow { color:var(--tile-muted); font-weight:600; }
.tile-grid > .tile > .device-laptop, .tile-grid > .tile > .tile-visual { align-self:stretch; }
@media (min-width: 734px) {
  .tile-grid .tile-headline { font-size:clamp(48px, 5.4vw, 76px); }
  .tile-grid > .tile--half .tile-headline { font-size:clamp(40px, 4.3vw, 60px); }
}
@media (min-width: 1068px) {
  .tile-grid > .tile--light:not(.tile--half):not(.showcase) { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); grid-template-rows:1fr auto auto auto 1fr; column-gap:56px; padding-bottom:0; }
  .tile-grid > .tile--light:not(.tile--half):not(.showcase) > .tile-eyebrow { grid-column:1; grid-row:2; }
  .tile-grid > .tile--light:not(.tile--half):not(.showcase) > .tile-headline { grid-column:1; grid-row:3; }
  .tile-grid > .tile--light:not(.tile--half):not(.showcase) > .tile-subline { grid-column:1; grid-row:4; }
  .tile-grid > .tile--light:not(.tile--half):not(.showcase) > .tile-links { grid-column:1; grid-row:5; align-self:start; }
  .tile-grid > .tile--light:not(.tile--half):not(.showcase) > .device-laptop { grid-column:2; grid-row:1 / -1; align-self:end; width:100%; margin:48px 0 0; }
}

/* ---------- Payback: the centerpiece ---------- */
.tile-grid > .payback { padding-bottom:56px; }
.payback-form { justify-content:flex-start; margin:32px 0 0; }
.payback-out { margin:40px 0 0; max-width:none; }
.tile .payback-big { font-size:clamp(44px, 9vw, 120px); font-weight:850; font-stretch:118%; letter-spacing:-0.05em; line-height:0.92; text-wrap:balance; }
.payback-detail { margin:16px 0 0; max-width:44ch; }
.payback-note { margin:20px 0 0; }

/* ---------- Closing tile: back to amber ---------- */
.tile-grid > .close-tile { justify-content:center; padding-bottom:56px; background-color:var(--v-amber);
  background-image:linear-gradient(90deg, rgba(11,11,12,0.07) 1px, transparent 1px), linear-gradient(rgba(11,11,12,0.07) 1px, transparent 1px);
  --tile-fg:var(--v-ink); --tile-muted:rgba(11,11,12,0.78); color:var(--v-ink); }
.close-tile .tile-headline { color:var(--v-ink); font-size:clamp(48px, 7.4vw, 104px); font-stretch:118%; letter-spacing:-0.05em; line-height:0.9; }
.close-tile .btn-pill { background-color:#0B0B0C; color:#F5F5F7; }

/* 2: on scroll, "Work less." fills in and the slash slides down along its own angle. */
@keyframes v-fill { to { color:var(--v-ink); } }
@keyframes v-slide { to { translate:-14vh 31vh; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-hero .hero-tagline > span + span { animation-name:home-rise, v-fill; animation-duration:0.9s, auto; animation-timing-function:cubic-bezier(0.2, 0.7, 0.1, 1), linear; animation-delay:0.1s, 0s; animation-fill-mode:both, both; animation-timeline:auto, scroll(root); animation-range:normal, 0px 420px; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 734px) {
    .home-slash { animation-name:v-draw, v-slide; animation-duration:0.7s, auto; animation-timing-function:cubic-bezier(0.2, 0.7, 0.1, 1), linear; animation-delay:0.15s, 0s; animation-fill-mode:both, both; animation-timeline:auto, scroll(root); animation-range:normal, 0px 700px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero .hero-tagline > span, .home-slash, .home-hero::after { animation:none; }
}