/* Home page, Website 3D v3.0 (ported from the "Docufen Website 3D v2.3" artifact, 19 Oct 2026).
   Every rule is scoped under .f3 (the page root) or html.f3-page, because Next keeps this stylesheet
   in the head after a client-side move to another page, and unscoped rules would restyle that page. */

/* Colours come from the site's own tokens in styles/globals.css (--background, --foreground,
   --muted-foreground, --border, --primary, --secondary), so the home page matches every other page
   and follows its light/dark switch. Only the film's sky (--horizon) is the film's own colour. */
.f3{
  --horizon:#EBDDCD;
  --airlock:hsl(var(--background));
  --scrim:rgba(235,221,205,.88);
  --hero-bg:transparent; --hero-pad:0;
  --slate:#231F20; /* charcoal of the Docufen wordmark: softer than the site's near-black */ --slate-2:hsl(var(--muted-foreground));
  --green:hsl(var(--primary)); --green-hover:hsl(149 80% 22%); --on-green:#FFFFFF;
  --teal:var(--green); --teal-ink:var(--green);
  --paper:hsl(var(--card)); --glass:hsl(var(--card) / .88); --solid:hsl(var(--card) / .97); --pill:hsl(var(--card) / .75);
  --line:hsl(var(--border)); --port:#231F20; --on-ink:#FFFFFF;
  --shadow:0 18px 40px -22px rgba(9,9,11,.4);
  --display:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;
  --ui:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fk-bezel:#18181B; --fk-bezel-edge:rgba(255,255,255,.1); --fk-screen:hsl(var(--secondary));
  --fk-shadow:0 30px 60px -26px rgba(9,9,11,.5);
  --logo-filter:none;
  --hold-scrim:rgba(9,9,11,.42);
  background:var(--airlock);color:var(--slate);font-family:var(--ui);-webkit-font-smoothing:antialiased;
  /* z-index:0 makes the film its own layer, so nothing in it (chapter chips z55, scroll pills z56,
     progress z61, loader z100) can draw over the site header (z50) or its open menu, as the chapter
     chips did below 1150px. The video player is appended to body and is not affected. */
  position:relative;z-index:0;overflow-x:clip
}
html.dark .f3{
  --scrim:transparent; --hero-bg:hsl(var(--background) / .86); --hero-pad:28px 30px; --hero-blur:12px;
  --green-hover:hsl(149 80% 32%);
  --slate:hsl(var(--foreground)); --port:#0A0A0A;
  --shadow:0 18px 40px -20px rgba(0,0,0,.7);
  --fk-bezel:#000000; --fk-bezel-edge:rgba(255,255,255,.12);
  --logo-filter:invert(1) hue-rotate(180deg);
  --hold-scrim:rgba(0,0,0,.5);
}
html.f3-page,html.f3-page body{background:hsl(var(--background))}
html.f3-page body{overflow-x:hidden}

.f3 *,.f3 *::before,.f3 *::after{box-sizing:border-box}
.f3 a{color:inherit}
.f3 :focus-visible{outline:3px solid var(--teal);outline-offset:3px}

/* the film fills the whole screen, at every size */
.f3 .film{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block;z-index:0;--film-bg:var(--horizon);background:var(--horizon)}

/* At each stop where the film holds and a card with a recording appears, a scrim dims the film so it
   reads as "the scroll has stopped here, now press play". It sits above the film and below the cards. */
.f3 .hold-scrim{position:fixed;inset:0;z-index:20;background:var(--hold-scrim);opacity:0;pointer-events:none;transition:opacity .45s}
.f3[data-beat="desk"] .hold-scrim,.f3[data-beat="ipad"] .hold-scrim,.f3[data-beat="iphone"] .hold-scrim,
.f3[data-beat="note"] .hold-scrim,.f3[data-beat="review"] .hold-scrim{opacity:1}
.f3.past .hold-scrim{opacity:0}

/* logo (used in the footer; the header is the site header from MainLayout) */
.f3 .progress{position:fixed;left:0;bottom:0;height:3px;background:var(--teal);z-index:61;width:0} /* at the very bottom, under the chapter chips */
.f3 .brand{display:flex;align-items:center;gap:8px;text-decoration:none;padding:9px 16px 9px 12px;border-radius:999px}
.f3 .brand .icon{width:24px;height:24px;flex:none}
.f3 .brand .word{height:16px;width:auto;filter:var(--logo-filter)}


/* Liquid glass: a soft frosted blur with no rim or highlight line (the bright 1px border read as a
   frame). Used for the chapter chips, the logo, secondary buttons and the floor caption. */
.f3 .glass,.f3 .brand,.f3 .rail button,.f3 .btn.ghost,.f3 .card.caption{
  background:rgba(255,255,255,.24);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border:0;
  box-shadow:0 8px 24px -14px rgba(9,9,11,.3)}
html.dark .f3 .glass,html.dark .f3 .brand,html.dark .f3 .rail button,html.dark .f3 .btn.ghost,html.dark .f3 .card.caption{
  background:rgba(30,30,34,.4);box-shadow:0 8px 24px -14px rgba(0,0,0,.6)}
.f3 .glass:hover,.f3 .rail button:hover,.f3 .btn.ghost:hover{background:rgba(255,255,255,.42)}

/* chapter rail */
.f3 .rail{position:fixed;left:4vw;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;gap:6px;flex-wrap:wrap;max-width:calc(92vw - 400px);transition:opacity .4s}
.f3 .rail button{font:500 12px var(--ui);color:var(--slate);border-radius:999px;padding:6px 11px;cursor:pointer;transition:background .3s,color .3s}
.f3 .rail button:hover{color:var(--slate)}
.f3 .rail button[aria-current="true"]{background:var(--green);color:var(--on-green)}
.f3[data-beat="hero"] .rail,.f3.past .rail{opacity:0;pointer-events:none}

/* While the site header's menu is open (below 1150px; its panel is the header's only absolutely
   positioned child), the film's chips, pills and chapter label step back, so they cannot show
   around the menu. Keyed on MainLayout's markup: if that panel changes, update this selector. */
html.f3-page body:has(header > div.absolute) .f3 :is(.rail,.next-hint,.chapter){opacity:0;pointer-events:none}

/* the current chapter, on phones only (the chapter chips are hidden there): a small dark pill under the
   site header, so a long swipe between stops still says where you are */
.f3 .chapter{display:none}
@media (max-width:859px),(max-height:500px) and (orientation:landscape){
  .f3 .chapter{display:block;position:fixed;left:50%;top:calc(64px + 10px + env(safe-area-inset-top,0px));z-index:56;transform:translateX(-50%);max-width:calc(100vw - 32px);padding:6px 14px;border-radius:999px;background:rgba(35,31,32,.88);color:#FFFFFF;font:600 12.5px var(--ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 24px -14px rgba(9,9,11,.5);pointer-events:none;transition:opacity .3s}
  .f3 .chapter:empty,.f3.past .chapter,.f3[data-beat="close"] .chapter{opacity:0}
}

/* beat panels */
.f3 .panel{position:fixed;z-index:30;opacity:0;pointer-events:none;transition:opacity .45s,transform .45s;transform:translateY(10px)}
.f3 .panel.is-on{opacity:1;pointer-events:auto;transform:none}
.f3.past .panel{opacity:0;pointer-events:none}
.f3 .where{font-size:13px;font-weight:600;color:var(--teal-ink);margin:0 0 8px;letter-spacing:.01em}
.f3 .card{background:var(--solid);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:20px;box-shadow:var(--shadow)}

/* hero */
/* a short gap under the 64px site header, not centred on the screen (centring left a large empty band
   above the headline on tall screens) */
.f3 .hero{left:4vw;top:calc(64px + clamp(24px,6vh,64px));transform:none;max-width:min(600px,44vw);transition:opacity .2s;background:var(--hero-bg);padding:var(--hero-pad);border-radius:20px;backdrop-filter:blur(var(--hero-blur,0px));-webkit-backdrop-filter:blur(var(--hero-blur,0px))}
.f3 .hero.is-on{transform:none}
.f3[data-beat="fly"] .hero{opacity:calc(1 - var(--beat-p,0) * 4);pointer-events:none}
.f3 .hero::before{content:"";position:absolute;inset:-60px -120px -60px -8vw;z-index:-1;background:radial-gradient(closest-side,var(--scrim),transparent);pointer-events:none}
.f3 .hero h1{font-family:var(--display);font-weight:800;font-size:clamp(44px,6.2vw,100px);line-height:.94;letter-spacing:-.045em;margin:0 0 24px;font-variation-settings:"opsz" 96;text-wrap:balance}
.f3 .hero h1 span{display:block}
/* desktop: each headline line stays on one line (about 8.5em wide, so about 53vw at 6.2vw); the hero
   box grows to fit it rather than wrapping. Phones (below 860px) keep the wrap. */
@media (min-width:860px){.f3 .hero{max-width:none}.f3 .hero h1 span{white-space:nowrap}.f3 .hero h1{text-wrap:nowrap}}
.f3 .hero h1 span+span{font-weight:400;color:var(--slate)}
.f3 .hero p{font-size:clamp(16px,1.2vw,19px);line-height:1.55;max-width:42ch;margin:0 0 26px}
.f3 .btns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.f3 .btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:14px;font-weight:700;font-size:16px;text-decoration:none;transition:background .2s,color .2s}
.f3 .btn.primary{background:var(--green);color:var(--on-green)}
.f3 .btn.primary:hover{background:var(--green-hover);color:var(--on-green)}
.f3 button.btn{border:0;cursor:pointer;font-family:inherit}
.f3 .btn.watch{margin-top:22px;gap:10px;padding:0 22px 0 18px;font-variant-numeric:tabular-nums}
.f3 .btn.watch svg{width:18px;height:18px;fill:currentColor}
.f3 .btn.ghost{color:var(--slate)}
.f3 .hint{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--slate-2);font-weight:500}
/* shown when a recording ends or is closed, until the next scroll moves the story on */
.f3 .next-hint{position:fixed;left:50%;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:56;transform:translate(-50%,10px);opacity:0;pointer-events:none;padding:10px 18px 10px 12px;border-radius:999px;color:#FFFFFF;font-weight:600;background:rgba(35,31,32,.92);box-shadow:0 10px 30px -12px rgba(9,9,11,.55);transition:opacity .4s,transform .4s}
.f3 .next-hint b{border-color:rgba(255,255,255,.85)}
.f3 .next-hint b::after{background:#FFFFFF}
.f3.next-on .next-hint:not(.hero-hint){opacity:1;transform:translate(-50%,0)}
/* the opening screen's own cue: the same dark pill, bottom-centre over the building */
.f3 .hero-hint{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
.f3[data-beat="hero"] .hero-hint{opacity:1;transform:translate(-50%,0)}
.f3[data-beat="fly"] .hero-hint{opacity:calc(1 - var(--beat-p,0) * 4);transform:translate(-50%,0)}
/* while the cookie banner is up (first visit), the scroll pills sit above it instead of on top of it */
body:has([data-cookie-banner]) .f3 .next-hint{bottom:calc(var(--cookie-h,180px) + 12px)}
.f3 .hint b{width:22px;height:34px;border:2px solid var(--slate-2);border-radius:12px;position:relative;flex:none}
.f3 .hint b::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--slate-2);animation:f3wheel 1.8s infinite}
@keyframes f3wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(10px);opacity:0}100%{opacity:0}}

/* video beats */
/* The five video cards: solid white, centred on the screen, text in one column and the recording in
   the other, so the stop reads as "press play" and cannot be missed. Only .vp; other cards unchanged. */
.f3 .vp{left:50%;top:50%;transform:translate(-50%,calc(-50% + 10px));width:min(1000px,90vw);padding:32px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:36px;background:#FFFFFF;backdrop-filter:none;-webkit-backdrop-filter:none}
html.dark .f3 .vp{background:hsl(var(--card))}
.f3 .vp.is-on{transform:translate(-50%,-50%)}
.f3 .vp.portrait{width:min(820px,90vw);grid-template-columns:minmax(0,1fr) auto}
.f3 .vp h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,2.9vw,46px);line-height:1;letter-spacing:-.035em;margin:0 0 12px;text-wrap:balance}
.f3 .vp p.body{margin:0;font-size:17px;line-height:1.55;max-width:42ch}
.f3 .dev{display:grid;justify-items:center;gap:8px;min-width:0}
.f3 .devcap{font-size:12.5px;color:var(--slate-2);font-weight:500;margin:0;font-variant-numeric:tabular-nums}

/* device frames */
.f3 .fk-device{display:block;position:relative;cursor:pointer;max-width:100%;outline:none;-webkit-tap-highlight-color:transparent}
.f3 .fk-device .fk-bezel{display:block;position:relative;background:var(--fk-bezel);box-shadow:var(--fk-shadow),inset 0 0 0 1px var(--fk-bezel-edge)}
.f3 .fk-device .fk-screen{display:block;position:relative;overflow:hidden;background:var(--fk-screen);max-width:100%}
.f3 .fk-device .fk-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
.f3 .fk-device .fk-play{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--green);display:grid;place-items:center;box-shadow:0 10px 30px -8px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.f3 .fk-device .fk-play svg{width:30px;height:30px;margin-left:4px;fill:#FFFFFF}
.f3 .fk-device:hover .fk-play,.f3 .fk-device:focus-visible .fk-play{transform:scale(1.1)}
.f3 .fk-device:hover .fk-screen img{transform:scale(1.02);filter:brightness(.94)}
.f3 .fk-device:focus-visible .fk-bezel{outline:3px solid var(--teal);outline-offset:4px}
.f3 .fk-monitor{width:min(560px,100%)}
.f3 .fk-monitor .fk-bezel{padding:10px;border-radius:14px}
.f3 .fk-monitor .fk-screen{border-radius:5px}
.f3 .fk-monitor::after{content:"";display:block;width:22%;height:22px;margin:0 auto;background:linear-gradient(var(--fk-bezel),var(--fk-bezel));clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.f3 .fk-laptop{width:min(580px,100%);padding:0 6%}
.f3 .fk-laptop .fk-bezel{padding:10px 10px 12px;border-radius:14px 14px 4px 4px}
.f3 .fk-laptop .fk-screen{border-radius:4px}
.f3 .fk-laptop::after{content:"";display:block;width:112%;margin-left:-6%;height:14px;border-radius:0 0 14px 14px;background:var(--fk-bezel);box-shadow:var(--fk-shadow)}
.f3 .fk-tablet{width:min(300px,100%)}
.f3 .fk-tablet .fk-bezel{padding:12px;border-radius:26px}
.f3 .fk-tablet .fk-screen{border-radius:14px}
.f3 .fk-phone{width:min(200px,100%)}
.f3 .fk-phone .fk-bezel{padding:8px;border-radius:30px}
.f3 .fk-phone .fk-screen{border-radius:23px}
.f3 .fk-phone .fk-play{width:60px;height:60px;margin:-30px 0 0 -30px}
.f3 .dev .fk-monitor,.f3 .dev .fk-laptop{width:100%}
.f3 .vp.portrait .fk-tablet{width:210px}
.f3 .vp.portrait .fk-phone{width:140px}

/* full-screen player (appended to body, so it carries its own scope class) */
.fk-player{position:fixed;inset:0;z-index:1000;background:#09090B;display:grid;place-items:center;padding:calc(env(safe-area-inset-top,0px) + 56px) 16px calc(env(safe-area-inset-bottom,0px) + 24px);animation:f3in .3s ease both}
.fk-player.fk-out{animation:f3out .25s ease both}
.fk-player .fk-stage{position:relative;width:100%;height:100%;border-radius:6px;overflow:hidden;background:#000}
.fk-player video{display:block;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer}
/* Loom-style controls: one line split into the film's chapters, then a row of buttons */
.fk-player .fk-bar{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:28px 18px 10px;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.45) 60%,transparent);color:#FFFFFF;font:500 14px "Hanken Grotesk",system-ui,sans-serif}
.fk-player .fk-line{display:flex;gap:4px;height:18px;align-items:center;cursor:pointer;touch-action:none;outline:none}
.fk-player .fk-line:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px;border-radius:4px}
.fk-player .fk-seg{position:relative;flex-basis:0;min-width:6px;height:18px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.fk-player .fk-track{position:relative;display:block;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden;transition:height .15s}
.fk-player .fk-line:hover .fk-track{height:6px}
.fk-player .fk-seg:hover .fk-track{background:rgba(255,255,255,.5)}
.fk-player .fk-fill{position:absolute;inset:0;background:hsl(149 70% 42%);transform-origin:left center;transform:scaleX(0)}
.fk-player .fk-seg.is-current .fk-track{background:rgba(255,255,255,.45)}
.fk-player .fk-tip{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(20,20,22,.92);color:#FFFFFF;font:600 12.5px "Hanken Grotesk",system-ui,sans-serif;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .15s}
.fk-player .fk-tip b{font-weight:500;opacity:.7;margin-left:4px;font-variant-numeric:tabular-nums}
.fk-player .fk-seg:hover .fk-tip,.fk-player .fk-seg:focus-visible .fk-tip{opacity:1}
.fk-player .fk-seg:first-child .fk-tip{left:0;transform:none}
.fk-player .fk-seg:last-child .fk-tip{left:auto;right:0;transform:none}
.fk-player .fk-row{display:flex;align-items:center;gap:4px;margin-top:6px}
.fk-player .fk-btn{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:8px;background:none;color:#FFFFFF;cursor:pointer}
.fk-player .fk-btn:hover{background:rgba(255,255,255,.14)}
.fk-player .fk-btn:focus-visible{outline:2px solid #FFFFFF;outline-offset:1px}
.fk-player .fk-btn svg{width:24px;height:24px;fill:currentColor}
.fk-player .fk-time{margin-left:8px;font-variant-numeric:tabular-nums;white-space:nowrap}
.fk-player .fk-chap{margin-left:14px;padding-left:14px;border-left:1px solid rgba(255,255,255,.3);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fk-player .fk-sp{flex:1}
.fk-player .fk-seg.tip-on .fk-tip{opacity:1}
.fk-player .fk-rotate{display:none}
/* touch screens: a taller line to land a thumb on, the chapter name shown above the finger */
@media (pointer:coarse){.fk-player .fk-line,.fk-player .fk-seg{height:36px}.fk-player .fk-tip{bottom:34px}}
/* portrait phones: the picture is only a third of the screen tall, so the controls sit right under it
   instead of at the bottom of the screen, with a hint that turning the phone gives a bigger picture */
@media (max-width:560px) and (orientation:portrait){
  .fk-player,.fk-player:fullscreen{display:flex;flex-direction:column;justify-content:center;padding:calc(env(safe-area-inset-top,0px) + 64px) 0 calc(env(safe-area-inset-bottom,0px) + 16px)}
  .fk-player .fk-stage{height:auto;border-radius:0;overflow:visible;background:none}
  .fk-player video{height:auto;aspect-ratio:16/10}
  .fk-player .fk-bar{position:static;background:none;padding:12px 12px 0}
  .fk-player .fk-end{position:fixed;inset:0;z-index:3;padding:24px}
  .fk-player .fk-close{z-index:4}
  .fk-player .fk-rotate{display:block;margin:22px 16px 0;text-align:center;color:rgba(255,255,255,.66);font:500 13.5px "Hanken Grotesk",system-ui,sans-serif}
}
@media (max-width:560px){.fk-player .fk-b5,.fk-player .fk-f5{display:none}.fk-player .fk-bar{padding:24px 10px 6px}.fk-player .fk-chap{margin-left:8px;padding-left:8px;font-size:12.5px}}
.fk-player:fullscreen{padding:56px 16px 24px}
.fk-player .fk-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);right:16px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font:600 15px/1 system-ui,-apple-system,sans-serif;cursor:pointer}
.fk-player .fk-close:hover{background:rgba(255,255,255,.2)}
.fk-player .fk-close:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* end of a section: carry on into the full film, or go back to the page */
.fk-player .fk-end{position:absolute;inset:0;z-index:1;display:grid;place-content:center;justify-items:center;gap:22px;padding:24px 24px 100px;background:rgba(9,9,11,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:f3in .3s ease both;text-align:center}
.fk-player .fk-end p{margin:0;color:#FFFFFF;font:600 clamp(20px,2.4vw,30px)/1.2 "Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;letter-spacing:-.02em}
.fk-player .fk-end-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.fk-player .fk-end button{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:14px;border:0;cursor:pointer;font:700 17px "Hanken Grotesk",system-ui,sans-serif}
.fk-player .fk-keep{background:hsl(149 80% 27%);color:#FFFFFF;box-shadow:0 12px 30px -12px rgba(14,124,63,.8)}
.fk-player .fk-keep:hover{background:hsl(149 80% 22%)}
.fk-player .fk-keep svg{width:20px;height:20px;fill:currentColor}
.fk-player .fk-back{background:rgba(255,255,255,.14);color:#FFFFFF}
.fk-player .fk-back:hover{background:rgba(255,255,255,.24)}
.fk-player .fk-end button:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
@keyframes f3in{from{opacity:0}}
@keyframes f3out{to{opacity:0}}

/* dive caption */
.f3 .caption{right:4vw;bottom:calc(28px + env(safe-area-inset-bottom,0px));max-width:390px;padding:18px 22px 20px}
.f3 .caption .where{margin-bottom:6px}
.f3 .caption p{margin:0;font-size:17px;line-height:1.45;font-family:var(--display);font-weight:600;letter-spacing:-.01em}

/* close */
.f3 .close{left:4vw;top:50%;transform:translateY(calc(-45% + 10px));width:min(620px,48vw);padding:28px 30px 26px}
.f3 .close.is-on{transform:translateY(-45%)}
.f3 .close h2{font-family:var(--display);font-size:clamp(36px,4.4vw,68px);line-height:.96;letter-spacing:-.04em;margin:0 0 16px;font-weight:800;text-wrap:balance}
.f3 .close .sub{font-size:18px;line-height:1.5;max-width:40ch;margin:0 0 22px}

/* rooftop diagram: six items wired into one document, with the Docufen logo beside it */
.f3 .connects{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) clamp(44px,9vw,110px) auto;align-items:center;column-gap:0}
.f3 .connects-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.f3 .connects-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:600;line-height:1.25;min-height:24px}
.f3 .connects-list li small{display:block;font-weight:500;color:var(--slate-2);font-size:12px;margin-top:2px}
.f3 .connects-list .dot{flex:none;width:8px;height:8px;margin-top:calc(.625em - 4px);border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(14,124,63,.15)}
.f3 .connects-lines{display:block;width:100%;align-self:start;overflow:visible}
.f3 .connects-lines .wire{fill:none;stroke:var(--line);stroke-width:2}
.f3 .connects-lines .pulse{fill:none;stroke:var(--green);stroke-width:3;stroke-linecap:round;stroke-dasharray:10 90;stroke-dashoffset:100;animation:f3flow 2.1s linear infinite}
@keyframes f3flow{to{stroke-dashoffset:0}}
.f3 .connects-hub{display:flex;align-items:center;gap:14px;padding-left:6px}
.f3 .connects-hub .doc{width:52px;height:64px;flex:none;overflow:visible;animation:f3plug 2.1s ease-in-out infinite;border-radius:10px}
.f3 .doc-page{fill:#FFFFFF;stroke:var(--green);stroke-width:2.5}
.f3 .doc-fold{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linejoin:round}
.f3 .doc-line{fill:none;stroke:var(--green);stroke-width:2.5;stroke-linecap:round;opacity:.55}
@keyframes f3plug{0%,100%{filter:drop-shadow(0 0 0 rgba(14,124,63,0))}50%{filter:drop-shadow(0 0 10px rgba(14,124,63,.45))}}
.f3 .connects-logo{display:flex;align-items:center;gap:8px}
.f3 .connects-logo .icon{width:28px;height:28px}
.f3 .connects-logo .word{height:19px;width:auto;filter:var(--logo-filter)}
@media (prefers-reduced-motion:reduce){.f3 .connects-lines .pulse{display:none}.f3 .connects-hub .doc{animation:none}}

/* the site footer (from MainLayout, the same as every other page): above the fixed film and its cards */
html.f3-page body footer{position:relative;z-index:58;background:hsl(var(--background))}

/* loader */
.f3 .loader{position:fixed;inset:0;z-index:100;background:var(--airlock);display:grid;place-items:center;font-family:var(--display);font-size:18px;transition:opacity .8s}
.f3.film-on .loader,.f3 .loader.gone{opacity:0;pointer-events:none}
.f3 .loader div{display:flex;gap:10px;align-items:center}
.f3 .loader i{width:10px;height:10px;border-radius:50%;background:var(--teal);animation:f3pulse 1s infinite alternate}
@keyframes f3pulse{to{transform:scale(.5);opacity:.4}}

/* phones and portrait screens, and phones on their side (short landscape screens) */
@media (max-width:859px),(max-height:500px) and (orientation:landscape){
  .f3 .rail{display:none}
  .f3 .hero{left:16px;right:16px;top:calc(84px + env(safe-area-inset-top,0px));transform:none;max-width:none}
  .f3 .hero.is-on{transform:none}
  .f3 .hero h1{font-size:clamp(38px,11vw,60px);margin-bottom:16px}
  .f3 .hero p{font-size:15.5px;margin-bottom:18px}
  .f3 .btns{margin-bottom:16px}
  .f3 .vp,.f3 .vp.portrait{left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:auto;transform:translateY(10px);padding:18px 18px 16px;gap:14px}
  .f3 .vp:not(.portrait){grid-template-columns:minmax(0,1fr)}
  .f3 .vp.is-on,.f3 .vp.portrait.is-on{transform:none}
  .f3 .vp h2{font-size:clamp(24px,7vw,32px);margin-bottom:8px}
  .f3 .vp p.body{font-size:15px;line-height:1.5}
  .f3 .vp.portrait{gap:14px}
  .f3 .vp.portrait .fk-tablet{width:118px}
  .f3 .vp.portrait .fk-phone{width:92px}
  .f3 .vp.portrait .fk-play{width:52px;height:52px;margin:-26px 0 0 -26px}
  .f3 .vp .dev .fk-monitor,.f3 .vp .dev .fk-laptop{width:min(100%,320px)}
  .f3 .caption{left:16px;right:16px;max-width:none}
  /* docked to the bottom like the other cards, so the rooftop shows above it */
  .f3 .close{left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-height:calc(100dvh - 96px);overflow:auto;width:auto;transform:translateY(10px);padding:20px 18px 18px}
  .f3 .close.is-on{transform:none}
  .f3 .close h2{font-size:clamp(32px,9.5vw,46px);margin-bottom:10px}
  .f3 .close .sub{font-size:15.5px;margin-bottom:16px}
  .f3 .connects{margin-top:18px}
  .f3 .connects-list li{font-size:14px}
  .f3 .connects-list li small{font-size:13px}
  .f3 .connects-hub{flex-direction:column;gap:8px;padding-left:4px}
  .f3 .connects-hub .doc{width:40px;height:50px}
  .f3 .connects-logo .icon{display:none}
  .f3 .connects-logo .word{height:14px}
}
@media (max-width:859px) and (max-height:700px){
  .f3 .vp p.body{display:none}
}
/* Video cards on phones: one shape for all five. The heading runs across the top, then the text and
   the Watch button on the left with the recording as a small thumbnail on the right, so a card takes
   about a third of the screen and the scene behind it stays in view. One play action per card in
   practice: the thumbnail still plays, but it reads as a picture, not a second big button. */
@media (max-width:859px),(max-height:500px) and (orientation:landscape){
  .f3 .beats .vp{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"where where" "h2 h2" "body dev" "watch dev";column-gap:16px;row-gap:0;align-items:start}
  .f3 .vp>div:first-child{display:contents}
  .f3 .vp .where{grid-area:where}
  .f3 .vp h2{grid-area:h2;margin-bottom:10px}
  .f3 .vp p.body{grid-area:body;font-size:14px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
  .f3 .vp .btn.watch{grid-area:watch;margin-top:12px;justify-self:start}
  .f3 .vp .dev{grid-area:dev;align-self:center}
  .f3 .vp .dev .fk-monitor,.f3 .vp .dev .fk-laptop{width:132px}
  .f3 .vp.portrait .fk-tablet{width:84px}
  .f3 .vp.portrait .fk-phone{width:56px}
  .f3 .vp .fk-play,.f3 .vp.portrait .fk-play{width:36px;height:36px;margin:-18px 0 0 -18px}
  .f3 .vp .fk-play svg{width:15px;height:15px;margin-left:2px}
  .f3 .vp .fk-monitor .fk-bezel{padding:4px;border-radius:7px}
  .f3 .vp .fk-monitor::after{height:10px}
  .f3 .vp .fk-laptop{padding:0 7px}
  .f3 .vp .fk-laptop .fk-bezel{padding:4px 4px 5px;border-radius:7px 7px 2px 2px}
  .f3 .vp .fk-laptop::after{height:6px;border-radius:0 0 6px 6px}
  .f3 .vp .fk-tablet .fk-bezel{padding:5px;border-radius:12px}
  .f3 .vp .fk-tablet .fk-screen{border-radius:7px}
  .f3 .vp .fk-phone .fk-bezel{padding:3px;border-radius:12px}
  .f3 .vp .fk-phone .fk-screen{border-radius:9px}
}
/* Phones on their side: about 390px of height. The hero, the cards and the rooftop are laid out for
   it rather than stacked as in portrait, where they ran off the screen and under the site header. */
@media (max-height:500px) and (orientation:landscape){
  .f3 .hero{right:auto;top:calc(72px + env(safe-area-inset-top,0px));width:min(560px,62vw)}
  .f3 .hero h1{font-size:34px;margin-bottom:10px}
  .f3 .hero p{font-size:14px;line-height:1.45;margin-bottom:12px}
  .f3 .btns{margin-bottom:0}
  .f3 .btn{min-height:44px}
  .f3 .hero-hint,.f3[data-beat="hero"] .hero-hint,.f3[data-beat="fly"] .hero-hint{left:auto;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:none}
  .f3 .beats .vp{right:auto;width:min(600px,calc(100vw - 32px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .f3 .vp h2{font-size:24px}
  .f3 .vp p.body{display:none}
  .f3 .vp .dev .fk-monitor,.f3 .vp .dev .fk-laptop{width:150px}
  .f3 .close{top:calc(72px + env(safe-area-inset-top,0px));bottom:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-areas:"where conn" "h2 conn" "sub conn" "cta conn";column-gap:28px;align-content:start;padding:16px 20px;max-height:calc(100dvh - 84px);overflow:auto}
  .f3 .close .where{grid-area:where}
  .f3 .close h2{grid-area:h2;font-size:30px}
  .f3 .close .sub{grid-area:sub;font-size:14px;margin-bottom:12px}
  .f3 .close>.btn{grid-area:cta;justify-self:start}
  .f3 .close .connects{grid-area:conn;margin-top:0;align-self:center}
}
@media (prefers-reduced-motion:reduce){
  .f3 .hint b::after,.f3 .loader i{animation:none}
  .f3 .panel,.f3 .rail,.f3 .loader,.f3 .hold-scrim{transition:none}
  .fk-player,.fk-player.fk-out{animation:none}
  .f3 .fk-device .fk-screen img,.f3 .fk-device .fk-play{transition:none}
}