/* SyntaxFlow — the five worlds.
   ===========================================================================
   Loaded by the home, the area pages and pricing, on top of base.css. Each
   trade is a world with its own flat colour and its material drawn large: the
   renders in assets/img/renders/ are painted on exactly that colour (see
   tools/render-studio/), so a picture has no edge — it melts into its section.

     glass     bottle green, the panes and their green edges
     windows   steel blue, an aluminium frame in section with its glazing
     envelope  sand, the Glaser wall opened layer by layer (the one light world)
     metal     graphite, a stack of profiles with the saw cuts towards you
     wood      walnut, an oak board with its parts lifted off

   The world colours do not change with the light or dark theme: they are the
   identity of each trade, like the wrapper of a bar of chocolate. Text on them
   is set per world to at least 4.5 : 1 (checked: tools/audit-a11y.mjs).
   =========================================================================== */

:root{
  --w-hero:#0d1418; --w-glass:#0b3a33; --w-windows:#173a5e; --w-envelope:#e9d8bf; --w-metal:#242526; --w-wood:#3a2414;
  --mega:clamp(3rem,1rem + 8.4vw,9.5rem);
}

/* ---------- a world: colour, ink and accent ---------- */
.world-glass   { --w:var(--w-glass);    --wi:#eef6f3; --wi2:#c4ddd5; --wa:#7fe3c6; --wl:rgba(255,255,255,.14); --wc:rgba(255,255,255,.06); }
.world-windows { --w:var(--w-windows);  --wi:#eef3f9; --wi2:#c6d5e6; --wa:#a9d2f7; --wl:rgba(255,255,255,.16); --wc:rgba(255,255,255,.07); }
.world-envelope{ --w:var(--w-envelope); --wi:#2a1a10; --wi2:#5b4434; --wa:#9a3a19; --wl:rgba(42,26,16,.16);   --wc:rgba(255,255,255,.5); }
.world-metal   { --w:var(--w-metal);    --wi:#eef0f2; --wi2:#c3c9cf; --wa:#ffc46b; --wl:rgba(255,255,255,.14); --wc:rgba(255,255,255,.05); }
.world-wood    { --w:var(--w-wood);     --wi:#f6ece2; --wi2:#dcc5ae; --wa:#efb97f; --wl:rgba(255,255,255,.15); --wc:rgba(255,255,255,.06); }
.world-hero    { --w:var(--w-hero);     --wi:#eef4f2; --wi2:#b9c8c4; --wa:#6fdcbf; --wl:rgba(255,255,255,.13); --wc:rgba(255,255,255,.05); }

.wz{ color:var(--wi); }
.wz h1,.wz h2,.wz h3{ color:var(--wi); }
.wz p{ color:var(--wi2); }
.wz a{ color:var(--wi); text-decoration-color:color-mix(in srgb,var(--wa) 70%,transparent); }
.wz a:hover{ text-decoration-color:var(--wa); }
.wz :focus-visible{ outline:3px solid var(--wa); outline-offset:3px; }

/* the dark header melts into the hero on the home page */
.home .site-head{ --ink:#eef4f2; --ink-2:#c3cfcc; --ink-3:#9fb1ac; --paper:#18242b; --surface:#0d1418; --rule:#24323a; --rule-2:#3a4a52; --glass:#6fdcbf; --glass-tint:#16362f;
  background:var(--w-hero); border-bottom-color:rgba(255,255,255,.07); color-scheme:dark; }

.mega{ font-size:var(--mega); font-stretch:125%; font-weight:780; line-height:.9; letter-spacing:-.035em; margin:0 0 .32em; text-wrap:balance; }
.mega span{ display:block; }

/* buttons on a world */
.w-btn{ display:inline-flex; align-items:center; gap:.55em; min-height:52px; padding:0 24px; border-radius:999px; font-weight:650; font-stretch:112%;
  text-decoration:none; background:var(--wa); color:var(--w); border:0; transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; box-shadow:0 10px 30px -14px var(--wa); }
.w-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -16px var(--wa); }
.w-btn:active{ transform:translateY(1px); }
.wz a.w-btn{ color:var(--w); text-decoration:none; }
.w-btn.ghost{ background:transparent; color:var(--wi); box-shadow:inset 0 0 0 1.5px var(--wl); }
.wz a.w-btn.ghost{ color:var(--wi); }
.w-btn.ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--wa); }
.w-btn .ar{ transition:transform .25s cubic-bezier(.16,1,.3,1); }
.w-btn:hover .ar{ transform:translateX(4px); }

/* =========================== HERO =========================== */
.w-hero{ position:relative; background:var(--w); overflow:hidden; isolation:isolate; }
.w-hero-img{ position:absolute; inset:0; z-index:-1; }
.w-hero-img img{ width:100%; height:100%; object-fit:cover; object-position:72% 55%; }
.w-hero::after{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,var(--w) 0%,color-mix(in srgb,var(--w) 86%,transparent) 34%,transparent 64%); }
.w-hero-in{ min-height:min(860px,calc(100svh - 60px)); display:flex; flex-direction:column; justify-content:center; padding-top:56px; padding-bottom:40px; }
.w-hero-copy{ max-width:min(860px,64%); container-type:inline-size; }
.w-hero .mega{ font-size:min(var(--mega),19cqi); }
html[lang^="es"] .w-hero .mega{ font-size:min(var(--mega),12.4cqi); }
.w-hero .lead{ font-size:clamp(1.08rem,.98rem + .45vw,1.32rem); max-width:46ch; color:var(--wi2); margin-bottom:28px; }
.w-hero .tsearch{ max-width:560px; margin:0 0 22px; }
.w-hero .tsearch label{ color:var(--wi2); }
.w-hero .tsearch input{ background:rgba(255,255,255,.07); color:var(--wi); border:1.5px solid rgba(255,255,255,.18); min-height:56px; font-size:1.05rem; border-radius:14px;
  backdrop-filter:blur(10px); }
.w-hero .tsearch input::placeholder{ color:#8fa39e; }
.w-hero .tsearch input:focus{ border-color:var(--wa); outline:none; box-shadow:0 0 0 4px color-mix(in srgb,var(--wa) 25%,transparent); }
.w-hero .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.w-hero .hint{ color:#97aaa5; max-width:52ch; font-size:.95rem; }

/* the five flavours, like the wrappers on a shelf */
.w-flav{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:40px; max-width:980px; }
.w-flav a{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:14px; text-decoration:none; color:var(--wi);
  background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); transition:background .2s, transform .2s; }
.w-flav a:hover{ background:rgba(255,255,255,.09); transform:translateY(-2px); }
.w-flav i{ width:22px; height:22px; border-radius:6px; flex:0 0 22px; background:var(--sw); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.w-flav b{ font-weight:640; font-stretch:110%; font-size:.98rem; display:block; line-height:1.15; }
.w-flav small{ color:#9fb1ac; font-size:.8rem; }

/* =========================== A WORLD =========================== */
.world{ position:relative; background:var(--w); overflow:hidden; isolation:isolate;
  background-image:linear-gradient(var(--prev,var(--w)),var(--w) 160px); }
.world-in{ position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center;
  min-height:min(980px,100svh); padding-top:96px; padding-bottom:96px; }
.world-img{ position:relative; margin:0 calc(-1 * max(24px,(100vw - var(--maxw)) / 2)) 0 -40px; }
.world.flip .world-media{ order:-1; }
.world.flip .world-img{ margin:0 -40px 0 calc(-1 * max(24px,(100vw - var(--maxw)) / 2)); }
.world-img img{ width:100%; height:auto; will-change:transform; }
.world-word{ position:absolute; z-index:-1; top:6%; left:-2vw; font-size:min(26rem,var(--wf,20vw)); font-weight:800; font-stretch:125%; letter-spacing:-.05em;
  line-height:.8; color:color-mix(in srgb,var(--wi) 7%,var(--w)); white-space:nowrap; pointer-events:none; user-select:none; will-change:transform; }
.world.flip .world-word{ left:auto; right:-2vw; }
.world-copy{ max-width:560px; container-type:inline-size; }
.world-kicker{ display:flex; align-items:center; gap:10px; font-weight:620; font-stretch:110%; font-size:.95rem; color:var(--wa) !important; margin-bottom:14px; }
.world-kicker i{ width:28px; height:3px; border-radius:2px; background:var(--wa); }
.world-h{ font-size:min(clamp(2.6rem,1.4rem + 5vw,6rem),15cqi); font-stretch:125%; font-weight:780; line-height:.92; letter-spacing:-.03em; margin:0 0 .3em; }
.world-p{ font-size:clamp(1.05rem,.98rem + .35vw,1.25rem); max-width:44ch; margin-bottom:26px; }
.world-links{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-wrap:wrap; gap:8px; }
.world-links a{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; text-decoration:none; font-weight:560; font-size:.95rem;
  box-shadow:inset 0 0 0 1px var(--wl); transition:box-shadow .2s, background .2s; }
.world-links a:hover{ box-shadow:inset 0 0 0 1.5px var(--wa); background:var(--wc); }

/* the tool's own worked example, floating over the picture */
.world-ex{ position:relative; margin-top:-48px; margin-left:auto; max-width:470px; padding:22px 24px 20px; border-radius:20px;
  background:var(--wc); box-shadow:inset 0 0 0 1px var(--wl), 0 30px 60px -30px rgba(0,0,0,.5); backdrop-filter:blur(14px) saturate(130%); }
.world.flip .world-ex{ margin-left:0; margin-right:auto; }
.world-ex .k{ font-size:.82rem; font-weight:640; letter-spacing:.01em; color:var(--wa) !important; margin:0 0 6px; }
.world-ex h3{ font-size:1.22rem; font-stretch:112%; margin:0 0 12px; }
.world-ex dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0 0 12px; font-size:.92rem; }
.world-ex dt{ color:var(--wi2); }
.world-ex dd{ margin:0; color:var(--wi); font-weight:560; font-variant-numeric:tabular-nums; }
.world-ex .out{ font-size:1rem; color:var(--wi) !important; border-top:1px solid var(--wl); padding-top:12px; margin-bottom:14px; }
.world-ex .go{ font-weight:640; text-decoration:none; display:inline-flex; gap:.4em; }
.world-ex .go:hover{ text-decoration:underline; }

/* =========================== THE WORKING =========================== */
.w-work{ padding:clamp(72px,10vw,150px) 0; }
.w-work-grid{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:56px; align-items:center; }
.w-work .big{ font-size:clamp(4rem,2rem + 7vw,8.5rem); font-weight:780; font-stretch:118%; letter-spacing:-.04em; line-height:.9; color:var(--glass); font-variant-numeric:tabular-nums; margin:8px 0 4px; }
.w-work .big small{ font-size:.32em; letter-spacing:0; color:var(--ink-2); font-weight:600; margin-left:.2em; }
.w-sheet{ position:relative; background:var(--surface); border-radius:6px; padding:30px 32px; box-shadow:var(--e2), 0 0 0 1px var(--rule);
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px); background-size:24px 24px; background-position:-1px -1px; }
.w-sheet::before{ content:""; position:absolute; inset:0; background:color-mix(in srgb,var(--surface) 82%,transparent); border-radius:6px; }
.w-sheet > *{ position:relative; }
.w-sheet .formula{ background:none; border:0; padding:0; margin:0; overflow-x:auto; max-width:100%; font-size:clamp(.92rem,.8rem + .5vw,1.18rem); line-height:1.9; }
.w-sheet .note{ font-family:var(--mono); font-size:.8rem; color:var(--glass); display:block; margin-top:14px; }
.w-std{ display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.w-std span{ font-family:var(--mono); font-size:.82rem; padding:6px 10px; border-radius:6px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); color:var(--ink-2); }

/* =========================== THE FACADE (PRO) =========================== */
.w-pro{ padding:clamp(80px,10vw,150px) 0; background:var(--w-hero); }
.w-pro .sec-head h2{ font-size:clamp(2.2rem,1.3rem + 3.6vw,4.4rem); font-stretch:122%; line-height:.95; letter-spacing:-.025em; }
.w-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:44px 0 36px; counter-reset:st; }
.w-step{ position:relative; padding:24px; border-radius:20px; background:rgba(255,255,255,.04); box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); display:flex; flex-direction:column; }
.w-step::before{ counter-increment:st; content:counter(st); position:absolute; top:-18px; left:22px; width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; font-weight:750; background:var(--wa); color:var(--w-hero); }
.w-step h3{ margin-top:10px; font-size:1.2rem; }
.w-step pre{ margin:auto 0 0; padding:14px; border-radius:12px; background:#071013; color:#bfe9dc; font-size:.8rem; overflow:auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); }
.w-step .shot{ margin:auto 0 0; border-radius:12px; overflow:hidden; box-shadow:0 20px 50px -24px rgba(0,0,0,.8); background:#fff; }
.w-step .shot img{ width:100%; }

/* =========================== FREE / PRO =========================== */
.w-offer{ padding:clamp(72px,9vw,140px) 0; }
.w-offer-grid{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:22px; align-items:stretch; margin-top:36px; }
.w-plan{ border-radius:24px; padding:32px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.w-plan h3{ font-size:1.5rem; }
.w-plan .price{ font-size:clamp(2.8rem,2rem + 3vw,4.2rem); font-weight:780; font-stretch:118%; letter-spacing:-.03em; line-height:1; margin:6px 0 18px; color:var(--ink); }
.w-plan .price small{ font-size:.34em; font-weight:600; color:var(--ink-3); letter-spacing:0; }
.w-plan ul{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:10px; }
.w-plan li{ position:relative; padding-left:28px; color:var(--ink-2); }
.w-plan li::before{ content:""; position:absolute; left:0; top:.45em; width:14px; height:8px; border-left:2.5px solid var(--glass); border-bottom:2.5px solid var(--glass); transform:rotate(-45deg); }
.w-plan.pro{ background:var(--w-glass); box-shadow:none; position:relative; overflow:hidden; }
.w-plan.pro::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:4px; background:linear-gradient(#7fe3c6,#1f8f72); }
.w-plan.pro h3,.w-plan.pro .price{ color:#eef6f3; }
.w-plan.pro .price small{ color:#a9cfc4; }
.w-plan.pro li{ color:#d2e7e0; }
.w-plan.pro li::before{ border-color:#7fe3c6; }

/* =========================== DIRECTORY =========================== */
.w-dir{ padding:clamp(64px,8vw,120px) 0; }
.w-dir-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-top:30px; }
.w-dir-grid > div{ border-radius:18px; overflow:hidden; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.w-dir-grid h3{ margin:0; padding:16px 18px; font-size:1.05rem; background:var(--sw); }
.w-dir-grid h3 a{ color:var(--swi); text-decoration:none; }
.w-dir-grid ul{ list-style:none; margin:0; padding:12px 18px 18px; display:grid; gap:7px; font-size:.92rem; }
.w-dir-grid li a{ color:var(--ink-2); text-decoration:none; }
.w-dir-grid li a:hover{ color:var(--glass-deep); text-decoration:underline; }

/* =========================== PRINCIPLES =========================== */
.w-why{ padding:0 0 clamp(72px,9vw,130px); }
.w-why-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin-top:28px; }
.w-why-grid > div{ padding:26px; border-radius:20px; background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule); }
.w-why-grid svg{ width:44px; height:44px; margin-bottom:14px; color:var(--glass); }
.w-why-grid h3{ font-size:1.15rem; }

/* =========================== RESPONSIVE =========================== */
@media (max-width:1040px){
  .w-dir-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .w-steps{ grid-template-columns:1fr; gap:34px; }
  .w-work-grid,.w-offer-grid{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:900px){
  .w-hero-copy{ max-width:100%; }
  .world-in{ grid-template-columns:1fr; gap:10px; min-height:0; padding-top:64px; padding-bottom:72px; }
  /* phones: picture, then the title and the text, then the worked example */
  .world-media,.world.flip .world-media{ display:contents; }
  .world-img,.world.flip .world-img{ order:-1; margin:0 -24px; }
  .world-ex,.world.flip .world-ex{ order:2; margin:26px 0 0; max-width:none; }
  .world-word{ top:1.5%; }
  .w-flav{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .w-why-grid{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .w-hero-img{ position:relative; inset:auto; z-index:0; margin:0 0 -18vw; }
  .w-hero-img img{ height:auto; aspect-ratio:4/5; max-height:72svh; object-fit:cover; object-position:50% 40%; }
  .w-hero::after{ display:none; }
  .w-hero-in{ min-height:0; padding-top:0; position:relative; z-index:1; }
  .w-flav{ margin-top:28px; }
}
@media (max-width:640px){
  .w-dir-grid{ grid-template-columns:1fr; }
  .w-plan{ padding:24px; }
  .w-sheet{ padding:22px 18px; }
  .w-sheet .formula{ font-size:.8rem; }
  .w-btn{ width:100%; justify-content:center; }
}

/* movement off: everything sits still and complete */
@media (prefers-reduced-motion: reduce){
  .w-btn,.w-flav a,.world-links a,.w-btn .ar{ transition:none; }
  .world-img img,.world-word{ transform:none !important; }
}
@media print{
  .world-img,.world-word,.w-hero-img,.w-flav{ display:none !important; }
  .wz,.w-pro{ background:#fff !important; color:#000; }
}

/* =========================== AREA PAGES =========================== */
/* the hero breaks out of the page's .wrap to the full width of the window */
.hubw{ display:block; margin:0 calc(50% - 50vw); padding:0 max(16px,calc((100vw - var(--maxw)) / 2)); background:var(--w); position:relative; overflow:hidden; }
.hubw-in{ display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:32px; align-items:center; min-height:min(720px,calc(100svh - 60px)); padding:56px 0; }
.hubw-copy{ container-type:inline-size; }
.hubw h1{ font-size:min(clamp(2.6rem,1.2rem + 5vw,6rem),12cqi); font-stretch:125%; font-weight:780; line-height:.92; letter-spacing:-.03em; max-width:none; margin:0 0 .35em; }
.hubw .answer{ background:none; border:0; box-shadow:none; padding:0; margin:18px 0 0; }
.hubw .answer::before,.hubw .answer::after{ display:none; }
.hubw .answer,.hubw .answer p{ color:var(--wi2); font-size:1.1rem; }
.hubw .answer strong,.hubw .answer b{ color:var(--wi); }
.hubw .lead{ color:var(--wi2); }
.hubw .jump{ margin-top:24px; }
.hubw .jump a{ background:transparent; color:var(--wi); border:0; box-shadow:inset 0 0 0 1px var(--wl); min-height:40px; display:inline-flex; align-items:center; text-decoration:none; }
.hubw .jump a:hover{ box-shadow:inset 0 0 0 1.5px var(--wa); background:var(--wc); }
.hubw-img{ margin:0 calc(-1 * max(16px,(100vw - var(--maxw)) / 2)) 0 -30px; }
.hubw-img img{ width:100%; height:auto; }

.hub .tgroups{ padding-top:clamp(44px,6vw,84px) !important; }
.hub .tgroup{ display:grid; grid-template-rows:auto 1fr; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:10px 44px; margin:0 0 clamp(44px,5vw,76px); align-items:start; }
.hub .tgroup > h2{ grid-column:1; font-size:clamp(1.45rem,1.05rem + 1.3vw,2.1rem); font-stretch:120%; line-height:1.05; }
.hub .tgroup > p{ grid-column:1; }
.hub .tgroup > .tlist{ grid-column:2; grid-row:1 / span 2; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.hub .titem{ border-radius:18px; padding:18px; grid-template-columns:1fr; gap:12px; text-decoration:none; }
.hub .titem svg{ width:64px; height:50px; }
.hub .titem:hover{ transform:translateY(-3px); }
.hub .titem.feat{ grid-column:1 / -1; grid-template-columns:132px 1fr; gap:22px; padding:24px; background:color-mix(in srgb,var(--m) 10%,var(--surface)); }
.hub .titem.feat svg{ width:132px; height:103px; }
.hub .titem.feat > div > b{ font-size:1.32rem; font-stretch:112%; }
@media (max-width:900px){
  .hubw-in{ grid-template-columns:1fr; min-height:0; padding:24px 0 40px; gap:8px; }
  .hubw-img{ order:-1; margin:0 -16px; }
  /* phones: the picture introduces the page, it must not push the title off the first screen */
  .hubw-img img{ max-height:44svh; object-fit:cover; object-position:50% 45%; }
  .hub .tgroup{ grid-template-columns:1fr; }
  .hub .tgroup > .tlist{ grid-column:1; grid-row:auto; grid-template-columns:1fr; }
  .hub .titem.feat{ grid-template-columns:76px 1fr; padding:18px; gap:14px; }
  .hub .titem.feat svg{ width:76px; height:59px; }
}

/* pricing: the hero is the glass world */
.pricing .hubw .price-hero{ padding:72px 0 64px; min-height:min(760px,calc(100svh - 60px)); }
.hubw .price-hero > div:first-child{ container-type:inline-size; }
.hubw .price-hero h1{ font-size:min(clamp(2.4rem,1.2rem + 4vw,4.6rem),10.5cqi); font-stretch:122%; line-height:.95; letter-spacing:-.025em; max-width:none; }
.hubw .price-art figcaption{ color:var(--wi2); }
.hubw .price-art .pa-screen img,.hubw .price-art .pa-doc img{ border-color:rgba(255,255,255,.12); box-shadow:0 30px 70px -30px rgba(0,0,0,.75); }
@media (max-width:999px){ .pricing .hubw .price-hero{ padding:36px 0 44px; min-height:0; } }

/* ---------- the Nano Banana pictures (set r2) ----------
   They were drawn with the subject on one side and empty background on the
   other, for text. In the hero the picture keeps to the right three quarters so
   the panes never cross the headline; in a world, where the picture already has
   its own column, it is cropped square on the subject's side. */
@media (min-width:768px){
  .w-hero-img{ inset:0 0 0 auto; width:76%; }
  .w-hero-img img{ object-fit:contain; object-position:100% 62%; }
}
.world-glass   { --fx:88%; }  .world-envelope{ --fx:86%; }  .world-wood{ --fx:84%; }
.world-windows { --fx:10%; }  .world-metal   { --fx:8%; }
@media (min-width:768px){
  .world-img img{ aspect-ratio:1 / 1; object-fit:cover; object-position:var(--fx,50%) 50%; max-height:min(760px,82svh); }
  .hubw-img img{ aspect-ratio:5 / 4; object-fit:cover; object-position:var(--fx,50%) 50%; }
}

/* the Pro section: a glass facade behind the heading, fading into the night */
.w-pro{ position:relative; overflow:hidden; isolation:isolate; }
.w-pro-art{ position:absolute; z-index:-1; top:0; right:0; width:min(980px,64vw); height:min(640px,78svh);
  background:right top / cover no-repeat;
  -webkit-mask-image:radial-gradient(ellipse 85% 85% at 78% 22%, #000 38%, transparent 76%); mask-image:radial-gradient(ellipse 85% 85% at 78% 22%, #000 38%, transparent 76%); opacity:.85; }
@media (max-width:900px){ .w-pro-art{ width:100%; height:420px; opacity:.45; } }
.w-plan-art{ display:block; width:calc(100% + 64px); max-width:none; height:auto; margin:-32px -32px 22px; aspect-ratio:16 / 9; object-fit:cover; }
@media (max-width:640px){ .w-plan-art{ width:calc(100% + 48px); margin:-24px -24px 18px; } }
.w-pro.near .w-pro-art{ background-image:url(/assets/img/art/pro-facade-1600.webp); }
@media print{ .w-pro-art{ display:none; } }

/* ---------- one section, one screen (12-10-2026) ----------
   On a laptop (about 1560 x 730 px under the header) every section of the home
   was 1.5 to 1.8 screens tall, and even 1.4 on a 1920 x 960 monitor: the big
   type and the pictures grew with the width only, and a world stacked its
   picture, its worked example and 96 px of air above and below. From here the
   big type and the pictures are capped by the height of the window as well,
   and the worked example sits on the empty side of its picture instead of
   under it, so each section fits the window it is scrolled into.
   --hd is the sticky header (60 px and its rule). */
:root{ --hd:61px; --mega:clamp(3rem, min(1rem + 8.4vw, 11.5svh), 9.5rem); }
/* the generic `section{padding:72px 0}` of base.css doubled the air: these two carry their own */
.w-hero,.world{ padding-top:0; padding-bottom:0; }
/* the blend from the section above must end before the picture starts, or the picture,
   painted on the flat world colour, shows its edge against the blend (and on phones a band
   of sand showed above the metal) */
.world{ background-image:linear-gradient(var(--prev,var(--w)),var(--w) clamp(22px,5svh,60px)); }

@media (min-width:901px){
  /* the hero: search and the two buttons on one line, the results drop over the page */
  .w-hero-in{ min-height:calc(100svh - var(--hd)); padding-top:clamp(20px,4svh,56px); padding-bottom:clamp(20px,4svh,40px); }
  .w-hero .mega{ margin-bottom:.26em; }
  .w-hero .lead{ max-width:58ch; margin-bottom:clamp(14px,2.6svh,28px); }
  .w-hero-copy{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:0 12px; }
  .w-hero-copy > *{ flex:1 1 100%; }
  .w-hero .tsearch{ flex:1 1 300px; max-width:none; margin:0; }
  .w-hero .tresults{ position:absolute; top:100%; left:0; right:0; z-index:5; }
  .w-hero .cta-row{ flex:0 0 auto; margin:0; }
  /* "Find your tool" jumps to the worlds, which the five chips just below already do, in the same screen */
  .w-hero .cta-row .w-btn:not(.ghost){ display:none; }
  .w-hero-copy{ max-width:min(900px,66%); }
  .w-hero .hint{ max-width:none; margin-top:clamp(10px,1.8svh,16px); font-size:.9rem; }
  .w-flav{ margin-top:clamp(16px,3svh,40px); }

  /* a world: one screen; the picture no taller than the window, the example on it */
  .world-in{ --pad:clamp(28px,6svh,80px); min-height:calc(100svh - var(--hd)); padding-top:var(--pad); padding-bottom:var(--pad); gap:clamp(28px,3vw,48px); }
  .world-img img{ max-height:min(760px, calc(100svh - var(--hd) - 2 * var(--pad))); }
  .world-media{ position:relative; }
  /* on the picture now, so its ground is the world colour itself, not a 6 % veil: the text keeps
     its contrast whatever part of the picture is behind it */
  .world-ex{ position:absolute; bottom:clamp(12px,2.4svh,28px); left:clamp(12px,1.6vw,28px); margin:0; max-width:min(410px,64%); padding:18px 20px 16px;
    background:color-mix(in srgb,var(--w) 80%,transparent); }
  .world.flip .world-ex{ left:auto; right:clamp(12px,1.6vw,28px); margin:0; }
  .world-h{ font-size:min(clamp(2.6rem,1.4rem + 5vw,6rem),15cqi,9.5svh); }
  .world-p{ margin-bottom:clamp(14px,2.6svh,26px); }
  .world-links{ margin-bottom:clamp(16px,3svh,30px); }

  /* the working */
  .w-work{ padding:clamp(36px,8svh,140px) 0; }
  /* the heading's size is written inline by tools/build-home.cjs; only !important reaches it */
  .w-work h2{ font-size:min(clamp(2.2rem,1.3rem + 3.4vw,4.2rem),7.5svh) !important; }
  .w-work .big{ font-size:min(clamp(4rem,2rem + 7vw,8.5rem),13svh); }
  .w-work-grid{ gap:clamp(28px,4vw,56px); }
  .w-sheet{ padding:clamp(18px,3svh,30px) 32px; }
  .w-sheet .formula{ line-height:1.7; }

  /* Pro: the screenshots cut to a window onto their top part */
  .w-pro{ padding:clamp(32px,6svh,140px) 0; }
  .w-pro .sec-head{ margin-bottom:0; }
  .w-pro .sec-head h2,.w-dir .sec-head h2{ max-width:none; }
  .w-pro .sec-head h2{ font-size:min(clamp(2.2rem,1.3rem + 3.6vw,4.4rem),6.8svh); }
  .w-steps{ margin:clamp(30px,4.6svh,44px) 0 clamp(20px,3.4svh,36px); }
  .w-step{ padding:20px 22px; }
  .w-step p{ font-size:.94rem; margin-bottom:14px; }
  .w-step .shot{ max-height:max(130px,18svh); }
  .w-step .shot img{ height:100%; object-fit:cover; object-position:50% 0; }
  .w-step pre{ max-height:max(130px,18svh); }

  /* Free / Pro */
  .w-offer{ padding:clamp(36px,7svh,130px) 0; }
  .w-offer-grid{ margin-top:clamp(16px,3svh,36px); }
  .w-plan{ padding:clamp(22px,3.6svh,32px) 32px; }
  .w-plan ul{ gap:8px; margin-bottom:18px; }

  /* the directory */
  .w-dir{ padding:clamp(36px,7svh,120px) 0; }
  .w-dir-grid{ margin-top:clamp(16px,3svh,30px); }

  /* area pages and pricing: the same caps on their hero */
  .hubw-in{ min-height:min(720px,calc(100svh - var(--hd))); padding:clamp(24px,5svh,56px) 0; }
  .hubw h1{ font-size:min(clamp(2.6rem,1.2rem + 5vw,6rem),12cqi,10svh); }
  .hubw-img img{ max-height:calc(100svh - var(--hd) - 2 * clamp(24px,5svh,56px)); }
  .pricing .hubw .price-hero{ min-height:min(760px,calc(100svh - var(--hd))); padding:clamp(28px,6svh,72px) 0 clamp(24px,5svh,64px); }
  .hubw .price-hero h1{ font-size:min(clamp(2.4rem,1.2rem + 4vw,4.6rem),10.5cqi,8.5svh); }
}
@media (min-width:1041px){
  .w-plan.pro{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.7fr); column-gap:28px; align-content:start; }
  .w-plan.pro > *{ grid-column:1; }
  .w-plan.pro > .w-plan-art{ grid-column:2; grid-row:1 / span 4; align-self:stretch; width:calc(100% + 32px); height:calc(100% + 2 * clamp(22px,3.6svh,32px)); min-height:0;
    margin:calc(-1 * clamp(22px,3.6svh,32px)) -32px calc(-1 * clamp(22px,3.6svh,32px)) 0; aspect-ratio:auto; object-fit:cover; }
  /* glass across the top in four columns, the other four trades in a row under it */
  .w-dir-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
  .w-dir-grid > div:first-child{ grid-column:1 / -1; }
  .w-dir-grid > div:first-child ul{ display:block; columns:4; column-gap:28px; }
  .w-dir-grid > div:first-child li{ break-inside:avoid; margin-bottom:7px; }
}

/* phones and tablets: room above the picture for the big word of the world (about .8 of
   its 20-24vw size), which the section padding used to give */
@media (max-width:900px){ .world-in{ padding-top:clamp(64px,21vw,96px); } }
/* phones: the pictures stop at about half the screen, so the heading shows with them */
@media (max-width:767px){
  .w-hero-img img{ max-height:54svh; }
  .world-img img{ max-height:46svh; object-fit:cover; object-position:50% 45%; }
}

/* a section page shows the real output of its tools, not an illustration
   (tools/build-sections.cjs): a screenshot on paper, with its caption */
.hubw-shot{margin:0;min-width:0}
.hubw-shot img{display:block;width:100%;height:auto;border-radius:10px;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.2),0 26px 60px -26px rgba(0,0,0,.7)}
.hubw-shot figcaption{margin-top:12px;font-size:.92rem;color:var(--wi2);max-width:60ch}
.hubw-shot figcaption a{color:var(--wi)}
@media (max-width:900px){ .hubw-shot{margin-top:14px} }

/* a task section of the hub on the home page (tools/apply-home-sections.cjs):
   paper ground between the worlds and the working, the real output on the right */
.w-task{ padding:clamp(36px,7svh,110px) 0; background:var(--paper); border-top:1px solid var(--rule); }
.w-task-in{ display:grid; gap:clamp(24px,4vw,56px); align-items:center; }
@media (min-width:901px){ .w-task-in{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); } }
.w-task h2{ font-size:min(clamp(2rem,1.2rem + 3vw,3.8rem),7.5svh); font-stretch:122%; line-height:.98; letter-spacing:-.022em; margin:0 0 .4em; max-width:16ch; }
.w-task-copy > p{ color:var(--ink-2); max-width:52ch; font-size:1.06rem; }
.w-task-links{ list-style:none; padding:0; margin:14px 0 22px; display:flex; flex-wrap:wrap; gap:8px; }
.w-task-links a{ display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px; text-decoration:none; color:var(--ink); background:var(--surface); box-shadow:inset 0 0 0 1px var(--rule-2); font-weight:560; font-size:.95rem; }
.w-task-links a:hover{ box-shadow:inset 0 0 0 1.5px var(--glass); }
.w-task-shot{ margin:0; min-width:0; }
.w-task-shot img{ display:block; width:100%; height:auto; border-radius:10px; background:#fff; box-shadow:var(--e2),0 0 0 1px var(--rule); max-height:min(560px,62svh); object-fit:contain; object-position:center; }
.w-task-shot figcaption{ margin-top:10px; font-size:.9rem; color:var(--ink-2); }