/* Data Action Golf — dataactiongolf.com
   Design system extracted from the Claude Design comp and rebuilt as a
   static, responsive stylesheet. Colours and type scale are unchanged. */

/* ---------- fonts ---------- */
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:100%; font-display:swap;
  src:url('fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Archivo'; font-style:normal; font-weight:400 800; font-stretch:100%; font-display:swap;
  src:url('fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('fonts/plexmono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('fonts/plexmono-latin-600.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ---------- tokens ---------- */
:root{
  --bg:#0B120E; --bg-2:#0E1712; --bg-3:#111C16; --bg-4:#121D17; --bg-deep:#0A110D;
  --ink:#F6FAF7; --ink-2:#F1F5F2; --body:#A2B7AB; --body-2:#A9BEB3; --muted:#8FA79A;
  --dim:#7F9689; --dimmer:#5F7669;
  --green:#3DAF8B; --green-hi:#4FC79E; --gold:#F5C542; --gold-hi:#FFD966; --teal:#14B8A6;
  --line:rgba(61,175,139,0.16); --line-2:rgba(61,175,139,0.22);
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:40px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink-2); overflow-x:hidden;
  font-family:Archivo,'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
/* height:auto is load-bearing: every <img> carries width/height attributes (so the
   browser reserves the right box before load), and max-width:100% shrinks the width
   on narrow columns. Without height:auto the attribute height is kept and the image
   is squashed. */
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--green); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto}}

.wrap{max-width:1240px; margin:0 auto}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--green)}
.eyebrow.gold{color:var(--gold)}
.eyebrow.teal{color:var(--teal)}
.lede{font-size:16px; line-height:1.65; color:var(--body)}

/* ---------- header ---------- */
.site-header{position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:24px; padding:14px var(--pad); background:rgba(11,18,14,0.82); backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
.brand{display:flex; align-items:center; gap:12px; color:var(--ink-2)}
.brand img{width:34px; height:34px; border-radius:9px}
.brand span{font-size:15px; font-weight:700; letter-spacing:-0.01em}
.site-nav{display:flex; align-items:center; gap:30px; font-size:13.5px; font-weight:500; color:#9DB2A7}
.site-nav a{transition:color .15s}
.site-nav a:hover{color:var(--ink-2)}
.nav-cta{display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  background:var(--green); color:#08130E; font-weight:600; transition:background .15s,color .15s}
.nav-cta:hover{background:var(--gold); color:var(--bg)}
.nav-toggle{display:none}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:15px 26px; border-radius:12px;
  font-size:15px; font-weight:700; transition:background .15s,border-color .15s,color .15s; border:1px solid transparent}
.btn-sm{padding:13px 22px; font-size:14.5px; border-radius:11px}
.btn-primary{background:var(--green); color:#08130E}
.btn-primary:hover{background:var(--green-hi)}
.btn-gold{background:var(--gold); color:#1A1206}
.btn-gold:hover{background:var(--gold-hi)}
.btn-teal{background:var(--teal); color:#04211E}
.btn-teal:hover{background:#2AD3C0}
.btn-ghost{border-color:rgba(61,175,139,0.35); color:#DDE8E1; font-weight:600}
.btn-ghost:hover{border-color:var(--green); color:#fff}
.btn-ghost.gold{border-color:rgba(245,197,66,0.35); color:#F0E3C4}
.btn-ghost.gold:hover{border-color:var(--gold)}
.btn-row{margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* ---------- hero ---------- */
.hero{position:relative; padding:112px var(--pad) 88px; border-bottom:1px solid rgba(61,175,139,0.14);
  background:radial-gradient(120% 90% at 18% 0%,#14291F 0%,var(--bg) 62%)}
.hero::before{content:''; position:absolute; inset:0; opacity:.28; pointer-events:none;
  background-image:repeating-linear-gradient(90deg,rgba(61,175,139,0.14) 0 1px,transparent 1px 96px)}
.hero .wrap{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center}
.hero h1{margin:26px 0 0; font-size:clamp(40px,6.2vw,76px); line-height:.98; letter-spacing:-0.035em;
  font-weight:800; color:var(--ink)}
.hero p{margin:26px 0 0; max-width:560px; font-size:19px; line-height:1.55; color:var(--body-2)}
.pill{display:inline-flex; align-items:center; gap:10px; padding:7px 14px; border-radius:999px;
  border:1px solid rgba(245,197,66,0.34); background:rgba(245,197,66,0.08); font-family:var(--mono);
  font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold)}
.pill .dot{width:6px; height:6px; border-radius:50%; background:var(--gold)}

.phone{position:relative; width:280px; max-width:100%; border-radius:44px; padding:11px;
  background:linear-gradient(160deg,#25473A,#0E1A14); box-shadow:0 40px 90px rgba(0,0,0,.6); margin:0 auto}
.phone img{width:100%; height:auto; border-radius:34px; display:block}
.hero-shot{display:flex; justify-content:center}
.shot-caption{margin-top:14px; text-align:center; font-family:var(--mono); font-size:10.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--dimmer)}

/* ---------- stat strip ---------- */
.stats{border-bottom:1px solid rgba(61,175,139,0.14); background:var(--bg-2)}
.stats .wrap{padding:34px var(--pad); display:grid; grid-template-columns:repeat(4,1fr); gap:28px}
.stat b{display:block; font-size:38px; font-weight:800; letter-spacing:-0.03em; color:var(--ink-2)}
.stat span{display:block; margin-top:4px; font-family:var(--mono); font-size:11px; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--muted)}

/* ---------- generic section ---------- */
.section{padding:96px var(--pad); border-bottom:1px solid rgba(61,175,139,0.14)}
.section.tight{padding:80px var(--pad); border-bottom:none}
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.split.lead-left{grid-template-columns:.9fr 1.1fr; align-items:start}
.section h2{margin:16px 0 0; font-size:clamp(32px,4.4vw,52px); line-height:1.04;
  letter-spacing:-0.035em; font-weight:800; color:var(--ink)}
.section h2.sm{font-size:clamp(30px,3.9vw,46px); font-weight:700; letter-spacing:-0.03em; line-height:1.06}
.section h3{margin:20px 0 0; font-size:clamp(28px,3.4vw,40px); line-height:1.08;
  letter-spacing:-0.03em; font-weight:700; color:var(--ink)}

.card{padding:26px; border-radius:16px; background:var(--bg-4); border:1px solid var(--line)}
.card b{font-size:17px; font-weight:700; color:var(--ink-2)}
.card p{margin:10px 0 0; font-size:15px; line-height:1.6; color:var(--body)}
.card-stack{display:grid; gap:18px}

/* ---------- apps grid ---------- */
.apps-head{display:flex; align-items:end; justify-content:space-between; gap:40px; flex-wrap:wrap}
.apps-head p{max-width:420px; font-size:15.5px; line-height:1.6; color:#9DB2A7}
.apps-grid{margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.app-card{display:flex; flex-direction:column; gap:18px; padding:30px; border-radius:20px;
  background:var(--bg-3); border:1px solid var(--line); transition:border-color .15s,transform .15s}
.app-card:hover{border-color:var(--green); transform:translateY(-2px)}
.app-card img{width:66px; height:66px; border-radius:16px}
.app-card .name{font-size:20px; font-weight:700; letter-spacing:-0.02em; color:var(--ink)}
.app-card .tag{margin-top:5px; font-size:13.5px; font-weight:600; color:var(--green)}
.app-card .tag.teal{color:var(--teal)}
.app-card .tag.gold{color:var(--gold)}
.app-card p{margin:9px 0 0; font-size:14.5px; line-height:1.6; color:var(--body)}
.app-card.teal:hover{border-color:var(--teal)}
.app-card.gold{background:linear-gradient(160deg,#1C2130,#101419); border-color:rgba(245,197,66,0.22)}
.app-card.gold:hover{border-color:var(--gold)}
.app-card.wide{grid-column:span 2; flex-direction:row; gap:26px;
  background:linear-gradient(150deg,#15271E,#101A15); border-color:var(--line-2)}
.app-card.wide img{width:82px; height:82px; border-radius:19px; flex-shrink:0}
.app-card.wide .name{font-size:23px}
.app-card.wide .tag{color:var(--gold); font-size:14px; margin-top:6px}
.app-card.wide p{font-size:15px}
.title-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.badge{font-family:var(--mono); font-size:10px; letter-spacing:0.12em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; background:rgba(61,175,139,0.14); color:#6FD3B0; white-space:nowrap}
.badge.gold{background:rgba(245,197,66,0.14); color:var(--gold)}

/* ---------- app detail ---------- */
.app-detail{padding:80px var(--pad)}
.app-detail.dark{background:#0D1611; border-top:1px solid rgba(61,175,139,0.14); border-bottom:1px solid rgba(61,175,139,0.14)}
.app-detail.navy{background:#0B1220; border-top:1px solid rgba(20,184,166,0.16); border-bottom:1px solid rgba(20,184,166,0.16)}
.app-detail.navy h3,.app-detail.navy .mini b{color:#F8FAFC}
.app-detail.navy .lede,.app-detail.navy .mini p{color:#94A3B8}
.app-detail.navy .mini{background:#111827; border-color:rgba(148,163,184,0.16)}
.app-detail.storm{background:radial-gradient(90% 80% at 80% 10%,#1D2231 0%,var(--bg) 65%)}
.detail-head{display:flex; align-items:center; gap:14px}
.detail-head img{width:44px; height:44px; border-radius:11px}
.feature-list{margin-top:28px; display:grid; gap:12px}
.feature-list li{display:flex; gap:14px; align-items:baseline; font-size:15px; color:#C3D6CB}
.feature-list .n{font-family:var(--mono); font-size:12px; color:var(--gold); flex-shrink:0}
ul.feature-list{list-style:none; padding:0; margin-top:28px}
.mini-grid{margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:14px}
.mini{padding:18px; border-radius:14px; background:var(--bg-3); border:1px solid var(--line)}
.mini b{font-size:15px; font-weight:700; color:var(--ink-2)}
.mini p{margin:7px 0 0; font-size:14px; line-height:1.55; color:var(--body)}
.chips{margin-top:26px; display:flex; gap:10px; flex-wrap:wrap}
.chip{padding:8px 14px; border-radius:999px; border:1px solid rgba(61,175,139,0.28);
  font-family:var(--mono); font-size:11.5px; color:#9FC3B3}
.note{margin:22px 0 0; font-size:14px; line-height:1.6; color:var(--muted)}
.callout{margin-top:26px; padding:24px; border-radius:16px; background:#101B15; border:1px solid rgba(61,175,139,0.2)}
.callout .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted)}
.callout .nums{margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.callout .nums b{display:block; font-size:32px; font-weight:800; letter-spacing:-0.03em; color:var(--ink-2)}
.callout .nums .g b{color:var(--green)} .callout .nums .y b{color:var(--gold)}
.callout .nums span{font-size:12.5px; color:var(--muted)}
.callout .foot{margin-top:16px; font-size:14px; line-height:1.55; color:#C3D6CB}

/* screenshot clusters.
   align-items:start so each frame hugs its image — grid's default `stretch`
   makes the shorter frame taller than its screenshot and shows a bare strip
   of .frame background underneath. */
.shots{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start}
.shots .frame:nth-child(2){margin-top:34px}
.frame{border-radius:26px; overflow:hidden; border:1px solid var(--line-2); background:#0F1A15;
  box-shadow:0 20px 50px rgba(0,0,0,.45)}
.frame img{width:100%; height:auto; display:block}
.frame.gold{border-color:rgba(245,197,66,0.24)}
.frame.teal{border-color:rgba(20,184,166,0.24)}
.shots.offset-first .frame:nth-child(1){margin-top:34px}
.shots.offset-first .frame:nth-child(2){margin-top:0}

/* ---------- podcast ---------- */
.ep-list{margin-top:56px; border-top:1px solid var(--line)}
.ep-head{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0 14px; flex-wrap:wrap}
.ep-head .k{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted)}
.ep-head a{font-size:13.5px; font-weight:600; color:var(--green)}
.ep{display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; padding:20px 8px;
  border-top:1px solid rgba(61,175,139,0.12); transition:background .15s}
.ep:last-child{border-bottom:1px solid rgba(61,175,139,0.12)}
.ep:hover{background:rgba(61,175,139,0.06)}
.ep .t{display:block; font-size:16.5px; font-weight:600; color:var(--ink-2)}
.ep .d{display:block; margin-top:4px; font-size:13.5px; color:var(--muted)}
.ep .len{font-family:var(--mono); font-size:12px; color:var(--muted); white-space:nowrap}
.cover{border-radius:24px; overflow:hidden; border:1px solid var(--line-2)}

/* ---------- contact ---------- */
.contact-form{display:grid; gap:16px; padding:32px; border-radius:20px; background:var(--bg-3);
  border:1px solid rgba(61,175,139,0.18)}
.contact-form .two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.contact-form label{display:grid; gap:8px}
.contact-form .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted)}
.contact-form input,.contact-form select,.contact-form textarea{
  padding:13px 14px; border-radius:10px; border:1px solid rgba(61,175,139,0.22); background:#0D1712;
  color:var(--ink-2); font-family:Archivo,Helvetica,sans-serif; font-size:15px; outline:none; width:100%}
.contact-form textarea{resize:vertical}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--green)}
.contact-form button{margin-top:4px; padding:15px; border:none; border-radius:11px; background:var(--green);
  color:#08130E; font-family:Archivo,Helvetica,sans-serif; font-size:15px; font-weight:700; cursor:pointer;
  transition:background .15s}
.contact-form button:hover{background:var(--green-hi)}

/* ---------- footer ---------- */
.site-footer{padding:56px var(--pad) 40px; border-top:1px solid var(--line); background:var(--bg-deep)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px}
.foot-grid p{margin:14px 0 0; max-width:280px; font-size:14px; line-height:1.6; color:var(--dim)}
.foot-col{display:grid; gap:10px; align-content:start}
.foot-col .k{font-family:var(--mono); font-size:10.5px; letter-spacing:0.13em; text-transform:uppercase; color:var(--dimmer)}
.foot-col a{font-size:14px; color:var(--body); transition:color .15s}
.foot-col a:hover{color:var(--green)}
.foot-bar{margin-top:44px; padding-top:22px; border-top:1px solid rgba(61,175,139,0.12);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--dimmer)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  :root{--pad:28px}
  .apps-grid{grid-template-columns:repeat(2,1fr)}
  .app-card.wide{grid-column:span 2}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
  .foot-grid > :first-child{grid-column:1 / -1}
}
@media (max-width:860px){
  .hero{padding:72px var(--pad) 64px}
  .hero .wrap,.split,.split.lead-left{grid-template-columns:1fr; gap:44px}
  .hero p{max-width:none}
  .section{padding:68px var(--pad)}
  .section.tight,.app-detail{padding:60px var(--pad)}
  .stats .wrap{grid-template-columns:1fr 1fr; gap:22px}
  .site-nav{display:none}
  .site-nav.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; padding:8px var(--pad) 18px; background:rgba(11,18,14,0.97);
    border-bottom:1px solid var(--line)}
  .site-nav.open a{padding:13px 0; font-size:15px; border-bottom:1px solid rgba(61,175,139,0.1)}
  .site-nav.open .nav-cta{margin-top:12px; justify-content:center; border-bottom:none}
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px;
    border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--ink-2);
    font-size:18px; cursor:pointer}
  .site-header{position:relative}
  /* app detail: image block always after the copy on mobile */
  .app-detail .split > .media{order:2}
  .app-detail .split > .copy{order:1}
  .mini-grid,.contact-form .two,.callout .nums{grid-template-columns:1fr}
  .callout .nums{gap:14px}
  .shots .frame:nth-child(2),.shots.offset-first .frame:nth-child(1){margin-top:0}
}
@media (max-width:560px){
  :root{--pad:20px}
  .apps-grid{grid-template-columns:1fr}
  .app-card.wide{grid-column:span 1; flex-direction:column}
  .foot-grid{grid-template-columns:1fr 1fr}
  .stats .wrap{grid-template-columns:1fr 1fr}
  .stat b{font-size:30px}
  .ep{grid-template-columns:1fr}
  .ep .len{margin-top:2px}
  .shots{gap:12px}
}