/* PIDNav public site — recreated from webplan/design/landing (artboards 1a/1b/1c).
   Served immutable under /site/ with a content-hash cache-buster; the HTML that
   links it stays no-store. Fonts are self-hosted (no external requests). */

@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('space-grotesk-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:100 700;font-display:swap;
  src:url('ibm-plex-sans-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('ibm-plex-mono-500.woff2') format('woff2')}

:root{
  --bg:#0b0e13; --panel:#10151c; --panel2:#12161c; --draw:#0e1319;
  --hair1:#1a212b; --hair2:#232b36; --hair3:#2a3442;
  --text:#e7ecf2; --text2:#c6cfd9; --muted:#93a0af; --faint:#5d6b7b;
  --amber:#ffb02e; --flagfill:rgba(255,176,46,0.14);
  /* brand tokens (logo handoff). Rejection rules: no blue on the mark
     itself (blueprint is GROUND only), no category colours on the mark,
     and never --amber text on white — use --amber-ink there. */
  --amber-ink:#a06806; --ink:#0b0e13; --blueprint:#16324f;
  --circ:#4cc3ff; --syst:#b48cff; --punch:#ff7a5c; --seq:#57d68d;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --disp:'Space Grotesk',sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}
a{color:inherit;text-decoration:none}
.wrap{max-width:1440px;margin:0 auto}
section{scroll-margin-top:16px}

@keyframes pnPulse{0%{transform:scale(.5);opacity:1}100%{transform:scale(2.2);opacity:0}}
.pulse{position:absolute;width:14px;height:14px}
.pulse .dot{position:absolute;inset:0;border-radius:50%;background:var(--amber)}
.pulse .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--amber);
  animation:pnPulse 1.6s ease-out infinite}

/* ---------- nav ---------- */
.nav{display:flex;align-items:center;gap:28px;padding:18px 48px;border-bottom:1px solid var(--hair1)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--text)}
.brand-tile{position:relative;display:flex;align-items:center;justify-content:center}
.brand-tile svg{display:block}
.brand-name{font:700 19px var(--disp);letter-spacing:-0.01em}
.wm-pid{color:var(--amber)}
.wm-nav{color:var(--text)}

/* the counter fires the established pulse on load — 3 cycles, then rest
   with the counter empty. Born at the counter centre = the tile centre. */
.logo-pulse{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.lp-dot,.lp-ring{position:absolute;border-radius:50%;opacity:0}
.lp-dot{left:-3px;top:-3px;width:6px;height:6px;background:var(--amber);
  animation:pidnavDot 1.6s ease-out 3}
.lp-ring{left:-6px;top:-6px;width:12px;height:12px;border:2px solid var(--amber);
  animation:pnPulse 1.6s ease-out 3}
@keyframes pidnavDot{0%{opacity:1}75%{opacity:1}100%{opacity:0}}
.nav-link{font:500 13.5px var(--sans);color:var(--muted)}
.nav-link:hover{color:var(--text)}
.btn-ghost{font:500 13.5px var(--sans);color:var(--text);padding:8px 16px;
  border:1px solid var(--hair3);border-radius:6px;display:inline-block;
  white-space:nowrap}
.btn-ghost:hover{border-color:#3a4657}
.btn-amber{font:600 13.5px var(--sans);color:var(--bg);background:var(--amber);
  padding:9px 18px;border-radius:6px;display:inline-block;white-space:nowrap}
.btn-amber:hover{background:#ffc95e}
.nav-burger{display:none;background:none;border:none;padding:4px;cursor:pointer}
.nav-menu{display:none}

/* ---------- hero ---------- */
.hero{padding:64px 48px 28px}
.eyebrow{font:500 11.5px var(--mono);letter-spacing:.14em;color:var(--amber);margin-bottom:18px}
h1{margin:0;font:700 62px/1.04 var(--disp);letter-spacing:-.015em;max-width:640px}
.hero-row{display:flex;align-items:flex-end;gap:48px}
.hero-sub{max-width:520px;padding-bottom:6px}
.hero-sub p{margin:0 0 22px;font:400 17px/1.55 var(--sans);color:var(--muted);text-wrap:pretty}
.hero-ctas{display:flex;align-items:center;gap:12px}
.cta-request{font:600 15px var(--sans);color:var(--bg);background:var(--amber);
  padding:12px 24px;border-radius:6px;white-space:nowrap}
.cta-request:hover{background:#ffc95e}
.cta-signin{font:500 15px var(--sans);color:var(--text);padding:11px 22px;
  border:1px solid var(--hair3);border-radius:6px;white-space:nowrap}
.cta-signin:hover{border-color:#3a4657}
.hero-micro{font:400 11px var(--mono);color:var(--faint);margin-left:6px}

/* ---------- hero animation (review 3): one 18s CSS loop, three sheets ----
   Keyframes verbatim from the design canvas. The artboard is fixed 1440w;
   .anim-scale is scaled by a wrapper transform (script in the page) rather
   than repositioning the fixed-px overlays — the canvas's own note. */
@keyframes pnSheetA{0%,29%{opacity:1}33%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes pnSheetB{0%,29%{opacity:0}33%,60%{opacity:1}64%,100%{opacity:0}}
@keyframes pnSheetC{0%,60%{opacity:0}64%,92%{opacity:1}97%,100%{opacity:0}}
@keyframes pnCursorA{0%{transform:translate(-420px,60px);opacity:0}4%{opacity:1}16%{transform:translate(0,0)}25%{opacity:1}29%,100%{opacity:0}}
@keyframes pnRingA{0%,24%{transform:scale(.2);opacity:0}26%{opacity:.9}31%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes pnCursorB{0%,36%{transform:translate(-500px,-60px);opacity:0}40%{opacity:1}52%{transform:translate(0,0)}56%{opacity:1}60%,100%{opacity:0}}
@keyframes pnRingB{0%,55%{transform:scale(.2);opacity:0}57%{opacity:.9}62%{transform:scale(1.6);opacity:0}100%{opacity:0}}
@keyframes pnGateB{0%,32%{opacity:0}35%,48%{opacity:1}52%,100%{opacity:0}}
@keyframes pnGateC{0%,63%{opacity:0}66%,92%{opacity:1}96%,100%{opacity:0}}
@keyframes pnBadge{0%,28%{opacity:0}32%,37%{opacity:1}41%,58%{opacity:0}62%,67%{opacity:1}71%,100%{opacity:0}}
@keyframes pnStep1{0%,28%{opacity:1}33%,94%{opacity:.35}99%,100%{opacity:1}}
@keyframes pnStep2{0%,28%{opacity:.35}33%,45%{opacity:1}50%,100%{opacity:.35}}
@keyframes pnStep3{0%,60%{opacity:.35}65%,92%{opacity:1}97%,100%{opacity:.35}}

.hero-anim{padding:28px 48px 64px}
.anim-outer{position:relative;overflow:hidden}
.anim-scale{width:1344px;transform-origin:top left}
.anim-panel{position:relative;height:300px;border:1px solid var(--hair2);border-radius:6px;
  overflow:hidden;background:var(--draw);
  background-image:radial-gradient(#1b2330 1px,transparent 1px);background-size:22px 22px}
.anim-sheet{position:absolute;inset:0}
.anim-sheet svg{display:block}
.anim-sheet.a{animation:pnSheetA 18s infinite}
.anim-sheet.b{opacity:0;animation:pnSheetB 18s infinite}
.anim-sheet.c{opacity:0;animation:pnSheetC 18s infinite}
.anim-strip{position:absolute;left:0;right:0;bottom:0;display:flex;
  justify-content:space-between;border-top:1px solid var(--hair2);padding:6px 14px;
  font:400 9.5px var(--mono);color:var(--faint);letter-spacing:.08em}
.anim-gate{position:absolute;width:14px;height:14px;opacity:0}
.anim-gate.b{left:107px;top:173px;animation:pnGateB 18s infinite}
.anim-gate.c{left:107px;top:88px;animation:pnGateC 18s infinite}
.anim-gate .dot{position:absolute;inset:0;border-radius:50%;background:var(--amber)}
.anim-gate .ring{position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--amber);animation:pnPulse 1.6s ease-out infinite}
.anim-cursor{position:absolute;opacity:0}
.anim-cursor.a{left:1172px;top:206px;animation:pnCursorA 18s infinite}
.anim-cursor.b{left:1172px;top:176px;animation:pnCursorB 18s infinite}
.anim-ring{position:absolute;width:46px;height:46px;border:2px solid var(--amber);
  border-radius:50%;opacity:0}
.anim-ring.a{left:1157px;top:187px;animation:pnRingA 18s infinite}
.anim-ring.b{left:1157px;top:157px;animation:pnRingB 18s infinite}
.anim-badge-row{position:absolute;left:0;right:0;top:16px;display:flex;
  justify-content:center;pointer-events:none}
.anim-badge{opacity:0;animation:pnBadge 18s infinite;font:500 10px var(--mono);
  letter-spacing:.1em;color:var(--muted);border:1px solid var(--hair2);
  border-radius:20px;padding:6px 14px;background:var(--panel)}
.anim-caps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:14px}
.anim-cap{font:400 12.5px/1.5 var(--sans);color:var(--muted)}
.anim-cap.s1{animation:pnStep1 18s infinite}
.anim-cap.s2{animation:pnStep2 18s infinite}
.anim-cap.s3{animation:pnStep3 18s infinite}
.anim-cap .frame-tag{white-space:nowrap}

/* mobile hero loop (review 4): the SAME 18s loop at mobile scale — three
   simplified 350×190 sheets sharing the desktop keyframes; rings + badge,
   no cursor. Same wrapper-transform responsiveness, fixed 350px inner. */
.m-anim{padding:20px}
.m-anim-scale{width:350px;transform-origin:top left}
.m-anim-panel{position:relative;height:216px;border:1px solid var(--hair2);border-radius:6px;
  overflow:hidden;background:var(--draw);
  background-image:radial-gradient(#1b2330 1px,transparent 1px);background-size:20px 20px}
.m-anim-panel .anim-strip{padding:5px 10px;font-size:8px}
.m-anim-panel .anim-gate{width:12px;height:12px}
.m-anim-panel .anim-gate .ring{inset:-5px}
.m-anim-panel .anim-gate.b{left:40px;top:129px}
.m-anim-panel .anim-gate.c{left:40px;top:74px}
.m-anim-panel .anim-ring{left:295px;top:122px;width:26px;height:26px}
.m-anim-panel .anim-badge-row{top:10px}
.m-anim-panel .anim-badge{font-size:8.5px;letter-spacing:.09em;padding:4px 10px}
/* No reduced-motion freeze, deliberately (2026-08-31): the handoff's
   freeze-on-sheet-1 note was built, seen on Natan's own machine (Windows
   "Animation effects" off maps to prefers-reduced-motion), and removed on
   his call — the hero plays for everyone. A guard test pins the absence. */

.frame-tag{font:500 10.5px var(--mono);color:var(--amber);letter-spacing:.1em;margin-right:8px}

/* ---------- sections ---------- */
.section{padding:56px 48px;border-top:1px solid var(--hair1)}
.sec-eyebrow{font:500 11.5px var(--mono);letter-spacing:.14em;color:var(--faint);margin-bottom:10px}
h2{margin:0 0 36px;font:700 34px var(--disp);letter-spacing:-.01em}

/* how it works */
.steps{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.step-card{background:var(--panel);border:1px solid var(--hair2);border-radius:6px;padding:24px}
.step-art{height:72px;margin-bottom:18px;display:flex;align-items:center}
.step-num{font:500 11px var(--mono);color:var(--amber);letter-spacing:.12em;margin-bottom:8px}
.step-name{font:600 17px var(--sans);margin-bottom:8px}
.step-copy{font:400 13.5px/1.55 var(--sans);color:var(--muted);text-wrap:pretty}

/* capabilities */
.caps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--hair2);
  border:1px solid var(--hair2);border-radius:6px;overflow:hidden}
.cap{background:var(--panel);padding:22px}
.cap-dot{width:9px;height:9px;margin-bottom:14px}
.cap-name{font:600 15px var(--sans);margin-bottom:6px}
.cap-copy{font:400 13px/1.5 var(--sans);color:var(--muted)}

/* field section */
.field{padding:56px 48px 64px;border-top:1px solid var(--hair1);display:flex;gap:56px;align-items:center}
.field-text{flex:1;max-width:620px}
.field h2{margin-bottom:16px}
.field .sec-eyebrow{color:var(--seq)}
.field-lede{margin:0 0 24px;font:400 15.5px/1.6 var(--sans);color:var(--muted);text-wrap:pretty}
.field-rows{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.field-row{display:flex;gap:12px;align-items:baseline}
.field-label{font:500 11px var(--mono);color:var(--seq);flex:none;width:74px}
.field-copy{font:400 14px/1.5 var(--sans);color:var(--text2)}
.field-more{font:500 13.5px var(--sans);color:var(--amber)}
.field-more:hover{color:#ffc95e}

/* ---------- phone mockup ---------- */
.phone-slot{flex:none;position:relative;width:252px;height:546px}
.phone-scale{transform:scale(.625);transform-origin:top left;width:402px}
.phone{width:402px;height:874px;background:#05070a;border:10px solid #1c222b;border-radius:58px;
  overflow:hidden;position:relative}
.phone::after{content:'';position:absolute;top:12px;left:50%;transform:translateX(-50%);
  width:120px;height:30px;border-radius:16px;background:#05070a;border:1px solid #141a22}
.phone-ui{height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--text);
  font-family:var(--sans)}
.phone-head{display:flex;align-items:baseline;gap:8px;padding:66px 18px 10px}
.phone-seq{font:500 11px var(--mono);color:var(--amber)}
.phone-title{font:600 14px var(--sans)}
.phone-count{margin-left:auto;font:500 10px var(--mono);color:var(--seq);
  border:1px solid #2a4636;border-radius:4px;padding:3px 7px}
.phone-draw{flex:1;position:relative;background:var(--draw);
  background-image:radial-gradient(#1b2330 1px,transparent 1px);background-size:22px 22px;
  border-top:1px solid var(--hair1);border-bottom:1px solid var(--hair1)}
.phone-draw>svg{display:block;position:absolute;inset:0;width:100%;height:100%}
.phone-dwg-chip{position:absolute;right:12px;top:12px;font:500 9.5px var(--mono);color:var(--faint);
  border:1px solid var(--hair2);border-radius:4px;padding:4px 8px;background:rgba(11,14,19,0.8)}
.phone-panel{background:var(--panel2);padding:16px 18px 46px}
.phone-meta{display:flex;justify-content:space-between;margin-bottom:8px}
.phone-step{font:500 10.5px var(--mono);color:var(--amber);letter-spacing:.1em}
.phone-dwg{font:400 10.5px var(--mono);color:var(--faint)}
.phone-bar{height:4px;background:var(--hair2);border-radius:2px;margin-bottom:14px}
.phone-bar>span{display:block;width:45%;height:4px;background:var(--seq);border-radius:2px}
.phone-instr{font:400 16px/1.45 var(--sans);margin-bottom:16px}
.phone-btns{display:flex;gap:10px;margin-bottom:12px}
.phone-prev,.phone-next{width:48px;height:48px;border:1px solid var(--hair3);border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:18px}
.phone-done{flex:1;height:48px;background:var(--seq);color:var(--bg);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font:600 15px var(--sans)}
.phone-links{display:flex;gap:18px;justify-content:center;font:400 12.5px var(--sans)}
.phone-skip{color:var(--muted)}
.phone-punch{color:var(--punch)}

/* ---------- request access ---------- */
.request{max-width:560px}
.request .sec-eyebrow{color:var(--amber)}
.req-form{display:flex;flex-direction:column;gap:10px}
.req-form input,.req-form textarea{width:100%;padding:11px 12px;border-radius:6px;
  border:1px solid var(--hair3);background:var(--panel);color:var(--text);
  font:400 14px var(--sans)}
.req-form input::placeholder,.req-form textarea::placeholder{color:var(--faint)}
.req-form textarea{min-height:84px;resize:vertical;font-family:var(--sans)}
.req-form button{font:600 15px var(--sans);color:var(--bg);background:var(--amber);
  padding:12px 24px;border:none;border-radius:6px;cursor:pointer;align-self:flex-start}
.req-form button:hover{background:#ffc95e}
.req-note{font:400 13.5px/1.5 var(--sans);color:var(--muted);margin-bottom:14px}
.req-ok{font:500 14px/1.5 var(--sans);color:var(--seq);border:1px solid #2a4636;
  border-radius:6px;padding:14px 16px;background:rgba(87,214,141,0.06)}

/* ---------- footer ---------- */
.footer{display:flex;align-items:center;gap:24px;padding:24px 48px;border-top:1px solid var(--hair1)}
.footer .brand-name{font:700 14px var(--disp)}
.footer-tag{font:400 12.5px var(--sans);color:var(--faint);margin-left:10px}
.footer-link{font:400 12.5px var(--sans);color:var(--muted)}
.footer-link:hover{color:var(--text)}
.footer-copy{font:400 10.5px var(--mono);color:var(--faint)}

/* ---------- field detail page (1c) ---------- */
.fd{padding:44px 48px 64px}
.fd .sec-eyebrow{color:var(--seq)}
.fd h2{margin:0 0 8px;font:700 32px var(--disp);letter-spacing:-.01em}
.fd-lede{margin:0 0 36px;font:400 15px/1.55 var(--sans);color:var(--muted);max-width:720px;
  text-wrap:pretty}
.fd-cols{display:flex;gap:48px;align-items:flex-start}
.fd-phone{width:322px;height:700px}
.fd-phone .phone-scale{transform:scale(.8)}
.fd-right{flex:1;display:flex;flex-direction:column;gap:24px;min-width:0}
.desk-eyebrow{font:500 11px var(--mono);letter-spacing:.12em;color:var(--faint);margin-bottom:12px}
.desk-rows{display:flex;flex-direction:column;gap:6px}
.desk-row{display:flex;align-items:center;gap:12px;padding:11px 14px;background:var(--panel);
  border:1px solid var(--hair2);border-radius:6px}
.desk-row.current{background:rgba(255,176,46,0.07);border-color:rgba(255,176,46,0.45)}
.desk-ic{width:20px;height:20px;border-radius:50%;flex:none;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center}
.desk-ic.done{background:var(--seq);color:var(--bg);font:600 11px var(--sans)}
.desk-ic.now{border:2px solid var(--amber);position:relative}
.desk-ic.now>span{position:absolute;inset:4px;border-radius:50%;background:var(--amber)}
.desk-ic.pend{border:1.5px solid #3a4657}
.desk-ic.block{border:1.5px solid var(--punch);color:var(--punch);font:600 12px var(--sans)}
.desk-num{font:500 11px var(--mono);color:var(--faint);flex:none}
.desk-num.hot{color:var(--amber)}
.desk-text{font:400 14px var(--sans);color:var(--muted)}
.desk-text.hot{font-weight:500;color:var(--text)}
.desk-stat{margin-left:auto;font:500 9.5px var(--mono);flex:none}
.desk-stat.done{color:var(--seq)}
.desk-stat.now{color:var(--amber)}
.desk-stat.pend{color:var(--faint)}
.desk-stat.block{color:var(--punch)}
.facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.fact{background:var(--panel);border:1px solid var(--hair2);border-radius:6px;padding:18px}
.fact-label{font:500 10.5px var(--mono);letter-spacing:.12em;color:var(--seq);margin-bottom:8px}
.fact-copy{font:400 13px/1.55 var(--sans);color:var(--muted)}
.fd-note{font:400 11.5px/1.6 var(--mono);color:var(--faint)}

.only-mobile{display:none !important}

/* =========================================================== mobile (1b) */
@media (max-width:767px){
  .only-desktop{display:none !important}
  .only-mobile{display:revert !important}

  .nav{gap:14px;padding:14px 20px}
  .brand{gap:10px}
  .brand-tile>svg{width:26px;height:26px}
  .brand-name{font:700 16px var(--disp)}
  .nav-burger{display:block}
  .nav-menu.open{display:flex;flex-direction:column;border-bottom:1px solid var(--hair1)}
  .nav-menu a{padding:14px 20px;font:500 14px var(--sans);color:var(--text);
    border-top:1px solid var(--hair1)}

  .hero{padding:36px 20px 8px}
  .eyebrow{font-size:10.5px;letter-spacing:.13em;margin-bottom:14px}
  .hero-row{display:block}
  h1{font:700 36px/1.08 var(--disp);letter-spacing:-.01em;margin-bottom:14px}
  .hero-sub{max-width:none;padding-bottom:0}
  .hero-sub p{font:400 14.5px/1.55 var(--sans);margin-bottom:20px}
  .hero-ctas{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:8px}
  .cta-request{padding:13px 0;text-align:center}
  .cta-signin{padding:12px 0;text-align:center}
  .hero-micro{display:none}

  .hero-anim{display:none}

  .section{padding:28px 20px}
  .sec-eyebrow{font-size:10.5px;letter-spacing:.13em;margin-bottom:18px}
  h2{font-size:24px;margin-bottom:24px}
  .steps,.caps{display:none}

  .m-steps{display:flex;flex-direction:column;gap:16px}
  .m-step{display:flex;gap:14px}
  .m-step-num{font:500 11px var(--mono);color:var(--amber);flex:none;padding-top:2px}
  .m-step-name{font:600 15px var(--sans);margin-bottom:3px}
  .m-step-copy{font:400 13px/1.5 var(--sans);color:var(--muted)}

  .m-caps{display:flex;flex-direction:column;gap:13px}
  .m-cap{display:flex;gap:12px;align-items:baseline}
  .m-cap-dot{width:8px;height:8px;flex:none;transform:translateY(-1px)}
  .m-cap-text{font:400 13.5px var(--sans);color:var(--text2)}
  .m-cap-text b{font-weight:600;color:var(--text)}

  .field{display:none}
  .m-field{display:block;margin:0 20px 28px;padding:20px;background:var(--panel);
    border:1px solid var(--hair2);border-radius:8px}
  .m-field-eyebrow{font:500 10.5px var(--mono);letter-spacing:.13em;color:var(--seq);
    margin-bottom:8px}
  .m-field-title{font:700 20px var(--disp);margin-bottom:8px}
  .m-field-copy{font:400 13.5px/1.55 var(--sans);color:var(--muted);margin-bottom:14px}
  .m-field a{font:500 13px var(--sans);color:var(--amber)}

  .request{max-width:none}

  .footer{gap:14px;padding:18px 20px;flex-wrap:wrap}
  .footer-tag{display:none}
  .footer-link.hide-m{display:none}

  /* field detail page on a phone */
  .fd{padding:32px 20px 48px}
  .fd h2{font-size:26px}
  .fd-cols{flex-direction:column;gap:32px}
  .fd-phone{align-self:center}
  .facts{grid-template-columns:1fr}
}
@media (min-width:768px){
  .m-steps,.m-caps,.m-field,.m-anim{display:none}
}
/* squeeze between phone and full desktop */
@media (min-width:768px) and (max-width:1180px){
  .hero-row{flex-direction:column;align-items:flex-start;gap:24px}
  h1{font-size:52px}
  .caps{grid-template-columns:repeat(3,1fr)}
  .field{flex-direction:column;align-items:flex-start}
  .fd-cols{flex-wrap:wrap}
}