/* Pretty Average Golf: homepage. Same visual language as the app: white ground, the split green wordmark,
   plain readable type, the map's pastel colours used sparingly. */
:root{
  --bg:#ffffff;--fg:#11140d;--dim:rgba(17,20,13,.62);--line:#e6e8e1;--soft:#f6f7f3;
  --mark:#4F7F24;--fairway:#C9E4A8;--green:#7FC8A0;--bunker:#EFD9A5;--water:#A9D6EE;--label:#D9480F;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --wrap:1180px;
}
@media (prefers-color-scheme:dark){:root{--bg:#0a0b08;--fg:#eef0e9;--dim:rgba(238,240,233,.64);--line:#22261d;--soft:#121410;--mark:#C9E4A8;color-scheme:dark}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}
.skip{position:absolute;left:-999px;top:8px;background:var(--fg);color:var(--bg);padding:8px 12px;border-radius:6px;z-index:10}
.skip:focus{left:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--mark);outline-offset:3px;border-radius:4px}

/* top bar */
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:20px;padding:12px max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.mini{font-family:var(--display);font-weight:500;font-size:22px;color:var(--mark);text-decoration:none;letter-spacing:-.02em;white-space:nowrap}
.mini i{font-style:italic}
.bar nav{display:flex;gap:20px;margin-left:auto}
.bar nav a{text-decoration:none;font-size:14.5px;color:var(--dim)}
.bar nav a:hover{color:var(--fg)}
.bar-cta{display:flex;gap:8px}
@media (max-width:760px){.bar nav{display:none}.bar-cta{margin-left:auto}}
@media (max-width:420px){.bar .btn.ghost{display:none}}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;font-weight:600;font-size:14.5px;text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s,opacity .2s}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.solid:hover{opacity:.86}
.btn.ghost{border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--dim)}
.btn.lg{min-height:50px;padding:0 24px;font-size:16px}

main{display:block}
section{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center;padding-block:56px 64px}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:28px 40px}}
.word{margin:0 0 18px;font-family:var(--display);font-weight:500;font-size:clamp(56px,10vw,128px);line-height:1;letter-spacing:-.035em;color:var(--mark);display:flex;flex-wrap:wrap;gap:0 .22em}
.word .r{font-style:italic}
.lede{font-size:clamp(18px,2.2vw,21px);line-height:1.5;max-width:34em;margin:0 0 26px;text-wrap:pretty}
.cta-row{display:flex;flex-wrap:wrap;gap:10px}
.fine{color:var(--dim);font-size:14px;margin:14px 0 0}

/* demo hole */
.demo{margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.demo-stage{position:relative;aspect-ratio:300/460;max-width:420px;width:100%;margin:0 auto;border-radius:6px;background:var(--bg)}
.demo svg{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;touch-action:manipulation}
.readout{position:absolute;top:6px;right:8px;display:flex;flex-direction:column;gap:2px;align-items:flex-end;pointer-events:none;text-shadow:0 0 3px var(--bg),0 0 3px var(--bg),0 0 6px var(--bg)}
.readout div{display:flex;align-items:baseline;gap:6px;line-height:1}
.readout b{font-weight:600;font-size:22px;font-variant-numeric:tabular-nums}
.readout .c b{font-size:46px;letter-spacing:-.03em}
.readout span{font-size:12px;color:var(--dim);min-width:40px}
.hole-no{position:absolute;left:10px;top:6px;font-size:30px;font-weight:500}
.demo figcaption{color:var(--dim);font-size:14px;text-align:center;max-width:420px;margin:0 auto}
.demo figcaption b{color:var(--fg)}

/* sections */
.band{padding-block:56px;border-top:1px solid var(--line)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px 40px;align-items:baseline;margin-bottom:28px}
@media (max-width:760px){.sec-head{grid-template-columns:minmax(0,1fr)}}
h2{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.5vw,46px);line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
.sec-head p{margin:0;color:var(--dim);max-width:60ch}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
@media (max-width:900px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.features{grid-template-columns:minmax(0,1fr)}}
.features article{min-width:0}
.features h3{font-size:18px;font-weight:600;margin:10px 0 6px;letter-spacing:-.005em}
.features p{margin:0;color:var(--dim)}
.dot{display:block;width:14px;height:14px;border-radius:50%;background:var(--c)}

.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 36px}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.steps li{counter-increment:s;color:var(--dim);min-width:0}
.steps li::before{content:counter(s);display:block;font-family:var(--display);font-size:40px;line-height:1;color:var(--mark);margin-bottom:10px}
.steps b{color:var(--fg);display:block;font-size:18px;margin-bottom:4px}

.search{display:block;max-width:560px}
.search input{width:100%;min-height:54px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--fg);font:inherit;font-size:17px}
.search input:focus{outline:none;border-color:var(--mark);background:var(--bg)}
.results{list-style:none;margin:14px 0 0;padding:0;max-width:760px}
.results li{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 2px;border-bottom:1px solid var(--line)}
.results .nm{font-weight:600}
.results .sub{display:block;font-size:13.5px;color:var(--dim)}
.results .st{font-size:13px;white-space:nowrap;color:var(--dim)}
.results .st.ready{color:var(--mark);font-weight:600}
.results .more{color:var(--dim);font-size:14px;border:0}

.two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px}
@media (max-width:860px){.two{grid-template-columns:minmax(0,1fr)}}
.two h2{margin-bottom:16px}
.two p{max-width:60ch;text-wrap:pretty}
.free{background:var(--soft);border-radius:8px;padding:28px}
.free p:last-of-type{margin-bottom:22px}

.foot{max-width:var(--wrap);margin:0 auto;padding:36px max(16px,env(safe-area-inset-right)) calc(36px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot nav{display:flex;gap:18px;flex-wrap:wrap}
.foot nav a{text-decoration:none;color:var(--dim);font-size:14px}
.foot nav a:hover{color:var(--fg)}
.foot p{flex-basis:100%;margin:0;color:var(--dim);font-size:13px}

/* ---------- GLASS (matches the app) ----------
   A soft sky/fairway wash behind everything; the bar, cards, search and buttons are frosted glass on top. */
:root{--glass:rgba(255,255,255,.56);--glass-b:rgba(255,255,255,.8);--card:rgba(255,255,255,.62);--card-b:rgba(17,20,13,.07);
 --gblur:blur(24px) saturate(180%);--gshadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.07);--hi:inset 0 1px 0 rgba(255,255,255,.9)}
@media (prefers-color-scheme:dark){:root{--glass:rgba(28,30,26,.55);--glass-b:rgba(255,255,255,.12);--card:rgba(255,255,255,.06);--card-b:rgba(255,255,255,.1);--gshadow:0 10px 30px rgba(0,0,0,.45);--hi:inset 0 1px 0 rgba(255,255,255,.08)}}
body{background:var(--bg);position:relative;letter-spacing:.005em;font-kerning:normal}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:radial-gradient(60vmax 50vmax at 92% -6%,rgba(124,195,236,.30),transparent 62%),radial-gradient(60vmax 55vmax at -8% 104%,rgba(79,127,36,.20),transparent 60%),radial-gradient(40vmax 30vmax at 50% 55%,rgba(201,228,168,.16),transparent 70%)}
@media (prefers-color-scheme:dark){body::before{background:radial-gradient(60vmax 50vmax at 92% -6%,rgba(124,195,236,.14),transparent 62%),radial-gradient(60vmax 55vmax at -8% 104%,rgba(79,127,36,.16),transparent 60%)}}
.glass{background:var(--glass);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b);box-shadow:var(--gshadow),var(--hi)}

/* floating capsule bar */
.bar{top:max(10px,env(safe-area-inset-top));margin:10px auto 0;max-width:calc(var(--wrap) - 8px);width:calc(100% - 20px);border-radius:999px;padding:8px 8px 8px 22px;
 background:var(--glass);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b);box-shadow:var(--gshadow),var(--hi)}
.bar nav a{font-weight:500}
.btn{min-height:42px;padding:0 18px;letter-spacing:0}
.btn.ghost{background:var(--glass);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b);box-shadow:var(--gshadow),var(--hi)}
.btn.ghost:hover{border-color:var(--glass-b);background:var(--card)}
.btn.lg{min-height:52px}

/* hero: the sample hole sits in a glass card, distances in a glass bar like the app */
.hero{padding-block:48px 56px}
.demo-stage{border-radius:32px;padding:0;background:var(--card);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b);box-shadow:var(--gshadow),var(--hi);overflow:hidden}
.demo svg{inset:58px 0 0 0;height:calc(100% - 58px)}
.readout{top:10px;left:10px;right:10px;flex-direction:row-reverse;justify-content:center;align-items:baseline;gap:22px;padding:8px 16px;border-radius:999px;text-shadow:none;
 background:var(--glass);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b);box-shadow:var(--gshadow),var(--hi)}
.readout div{gap:5px}
.readout b{font-size:19px}
.readout .c b{font-size:32px}
.readout span{min-width:0;font-size:11.5px}
.hole-no{top:auto;bottom:12px;left:12px;font-size:15px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--glass);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b)}
.hole-no::before{content:"Hole "}

/* sections: no rules between them, content in glass cards */
.band{border-top:0;padding-block:40px}
.features{gap:14px}
.features article,.steps li{padding:22px 22px 24px;border-radius:26px;background:var(--card);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--card-b);box-shadow:var(--gshadow)}
.features h3{margin-top:14px}
.dot{width:12px;height:12px;box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent)}
.steps{gap:14px}
.steps li::before{font-size:34px;margin-bottom:12px}

/* search: glass pill with a magnifier; results in one glass card */
.search{position:relative}
.search::before{content:"";position:absolute;left:20px;top:50%;width:14px;height:14px;margin-top:-9px;border:2px solid var(--dim);border-radius:50%;pointer-events:none}
.search::after{content:"";position:absolute;left:33px;top:50%;width:7px;height:2px;margin-top:5px;background:var(--dim);transform:rotate(45deg);border-radius:2px;pointer-events:none}
.search input{padding-left:48px;background:var(--glass);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b);box-shadow:var(--gshadow),var(--hi)}
.search input:focus{background:var(--glass);border-color:var(--glass-b);box-shadow:0 0 0 2px var(--mark),var(--gshadow)}
.results:not(:empty){margin-top:12px;padding:6px 18px;border-radius:24px;background:var(--card);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--card-b);box-shadow:var(--gshadow)}
.results li{border-bottom-color:var(--card-b)}
.results li:last-child{border-bottom:0}

/* about + free */
.two>div:first-child{padding:4px 2px}
.free{background:var(--glass);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--glass-b);box-shadow:var(--gshadow),var(--hi);border-radius:30px;padding:30px}

/* footer as a glass card */
.foot{border-top:0;margin:20px auto calc(16px + env(safe-area-inset-bottom));width:calc(100% - 20px);border-radius:28px;padding:24px 26px;
 background:var(--card);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);border:1px solid var(--card-b)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.bar,.btn.ghost,.readout,.hole-no,.search input,.free{background:var(--bg)}.features article,.steps li,.results:not(:empty),.foot,.demo-stage{background:var(--soft)}}
@media (prefers-reduced-transparency:reduce){.bar,.btn.ghost,.readout,.hole-no,.search input,.free,.features article,.steps li,.results:not(:empty),.foot,.demo-stage{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- single-screen homepage: wordmark, the sample hole, one button, two small links. No scroll. ---------- */
body.one{height:100dvh;overflow:hidden}
.one main{height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;justify-items:center;gap:clamp(10px,2.2dvh,22px);
 padding:max(22px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));text-align:center}
.one .word{font-size:clamp(44px,min(13vw,10dvh),104px);justify-content:center;margin:0;gap:0 .2em}
.one .tag{margin:6px 0 0;color:var(--dim);font-size:clamp(14px,1.9dvh,17px)}
.one .demo{min-height:0;height:100%;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.one .demo-stage{flex:1 1 auto;min-height:0;height:100%;width:auto;max-width:100%;aspect-ratio:300/460;margin:0}
.one .demo figcaption{font-size:12.5px;color:var(--dim)}
.one-go{display:flex;flex-direction:column;align-items:center;gap:12px}
.one-go .btn.lg{min-width:220px}
.tiny{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim)}
.tiny a{color:var(--dim);text-decoration:none;padding:4px 2px}
.tiny a:hover{color:var(--fg)}
@media (max-height:560px){.one .tag,.one .demo figcaption{display:none}}
.one .demo-stage{container-type:inline-size}
.one .readout{gap:clamp(8px,5cqw,22px);padding:7px clamp(8px,4cqw,16px)}
.one .readout b{font-size:clamp(14px,7cqw,19px)}
.one .readout .c b{font-size:clamp(22px,12cqw,32px)}
.one .readout span{font-size:clamp(9.5px,4.2cqw,11.5px)}
.one .readout span{white-space:nowrap}.one .hole-no{font-size:12.5px;padding:4px 10px}
/* no demo: wordmark, line and button centred on the screen */
.one main{grid-template-rows:1fr auto 1fr;align-items:center;gap:28px}
.one .one-top{grid-row:2}
.one .one-go{grid-row:3;align-self:start}
.one .word{font-size:clamp(52px,min(15vw,17dvh),156px)}

/* ---------- Stamped steel (the 70s–90s forged-iron look) ----------
   A satin, brushed plate with faint face-groove lines and grain; the wordmark is stamped into it in Damion,
   lowercase, paint-filled, with a light lip under each stroke and shadow above, like lettering on an old blade. */
:root{--logo:'Damion',cursive;
 --plate:radial-gradient(120% 70% at 30% 18%,rgba(255,255,255,.55),transparent 60%),
  repeating-linear-gradient(0deg,transparent 0 31px,rgba(0,0,0,.045) 31px 32px,rgba(255,255,255,.35) 32px 33px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,rgba(0,0,0,.03) 1px 2px,transparent 2px 4px),
  linear-gradient(165deg,#eceef0 0%,#c9cdd2 38%,#f3f4f5 58%,#b9bec4 100%);
 --ink:#1f2124;--lip:rgba(255,255,255,.8);--cut:rgba(0,0,0,.42)}
@media (prefers-color-scheme:dark){:root{
 --plate:radial-gradient(120% 70% at 30% 18%,rgba(255,255,255,.08),transparent 60%),
  repeating-linear-gradient(0deg,transparent 0 31px,rgba(0,0,0,.25) 31px 32px,rgba(255,255,255,.04) 32px 33px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,rgba(0,0,0,.08) 1px 2px,transparent 2px 4px),
  linear-gradient(165deg,#34383d 0%,#1d2023 40%,#2b2f33 60%,#141618 100%);
 --ink:#e6e9ec;--lip:rgba(255,255,255,.14);--cut:rgba(0,0,0,.75)}}
.stamp{font-family:var(--logo);font-weight:400;letter-spacing:0;text-transform:lowercase;color:var(--ink);text-shadow:0 1px 0 var(--lip),0 -1px 0 var(--cut),0 0 1px rgba(0,0,0,.15)}
.mini{font-family:var(--logo)!important;font-style:normal!important;font-weight:400!important;letter-spacing:0!important;font-size:24px!important;color:var(--fg)!important;text-transform:lowercase}
.mini i{font-style:normal}
body.one{background:var(--plate);background-color:#c9cdd2}
@media (prefers-color-scheme:dark){body.one{background-color:#1d2023}}
body.one::before{opacity:0}
body.one::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.08;background-size:200px 200px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>")}
.one main{grid-template-rows:1fr auto 1fr;align-items:center;gap:0}
.one main>.word{grid-row:2;margin:0;font-size:clamp(60px,min(19vw,22dvh),200px);line-height:1.15;white-space:nowrap;display:block;padding:0 .08em}
.one .one-go{grid-row:3;align-self:start;margin-top:clamp(18px,4dvh,40px)}
.one .btn.solid{background:var(--ink);color:#f3f4f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 0 var(--lip)}
@media (prefers-color-scheme:dark){.one .btn.solid{color:#16181b}}
.one .tiny,.one .tiny a{color:color-mix(in srgb,var(--ink) 65%,transparent)}
/* intro */
.ld{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;place-items:center;background:var(--plate);background-color:#c9cdd2;transition:opacity .8s cubic-bezier(.6,0,.2,1)}
@media (prefers-color-scheme:dark){.ld{background-color:#1d2023}}
.ld-word{position:relative;font-size:clamp(60px,min(19vw,22dvh),200px);line-height:1.15;white-space:nowrap;padding:0 .08em}
.ld-word>.stamp:first-child{color:transparent;text-shadow:0 1px 0 var(--lip),0 -1px 0 var(--cut)}
.ld-ink{position:absolute;inset:0;padding:0 .08em;clip-path:inset(-10% calc((1 - var(--p,0)) * 100%) -10% 0)}
.ld-l{position:absolute;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));margin:0;text-align:center;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.5em;text-transform:uppercase;color:var(--ink)}
.ld-l span{opacity:.35;animation:ldc 1.2s ease-in-out infinite alternate;animation-delay:calc(var(--i)*.12s)}
@keyframes ldc{to{opacity:1}}
.ld-n{position:absolute;left:0;right:0;bottom:calc(30px + env(safe-area-inset-bottom));margin:0;text-align:center;font:700 22px/1 var(--sans);font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.ld.out{opacity:0}
html.intro .one-go{opacity:0;transform:translateY(10px)}
html.intro-done .one-go{transition:opacity .7s .25s,transform .7s .25s cubic-bezier(.2,.8,.2,1)}
.one main>.word,.ld-word{font-size:clamp(50px,min(16vw,22dvh),200px)}

/* ---------- liquid background (replaces the steel grid) ---------- */
body.one{background:radial-gradient(120% 90% at 30% 20%,#f4f5f7,#d7dbe0 70%,#c9ced4);background-color:#e6e8eb}
@media (prefers-color-scheme:dark){body.one{background:radial-gradient(120% 90% at 30% 20%,#23262a,#111315 70%,#0b0c0d);background-color:#141618}}
body.one::after{content:none}
#liq{position:fixed;inset:0;width:100vw;height:100dvh;z-index:-1;display:block;opacity:0;transition:opacity 1.2s ease}
#liq.on{opacity:1}
#golf{position:fixed;inset:0;width:100vw;height:100dvh;z-index:-1;display:none;opacity:0;transition:opacity .8s ease;touch-action:none}
#golf.on{display:block;opacity:1}
.one{touch-action:none;-webkit-user-select:none;user-select:none}
.tilt{font:inherit;font-size:13px;font-weight:600;color:var(--fg);padding:7px 14px;border-radius:999px;border:1px solid var(--card-b);background:var(--card);-webkit-backdrop-filter:var(--gblur);backdrop-filter:var(--gblur);box-shadow:var(--gshadow);cursor:pointer}
.tilt[hidden]{display:none}
.stamp{text-shadow:0 1px 0 color-mix(in srgb,var(--lip) 70%,transparent),0 -1px 0 color-mix(in srgb,var(--cut) 55%,transparent)}
/* intro: letters one after another */
#hero-title .lt{display:inline-block;white-space:pre}
html.intro #hero-title .lt{opacity:0;animation:ltIn .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(120ms + var(--i) * 85ms)}
@keyframes ltIn{from{opacity:0;transform:translateY(.12em);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){@keyframes ltIn{from{opacity:0}to{opacity:1}}html.intro #hero-title .lt{animation-duration:.3s}}
html.intro:not(.intro-done) .one-go{opacity:0;transform:translateY(8px)}
html.intro-done .one-go{opacity:1;transform:none;transition:opacity .7s,transform .7s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){html.intro #hero-title .lt{animation-delay:calc(var(--i) * 30ms)}}

/* film grain over the homepage: softens the coral; a little lighter in dark mode */
body.one::after{content:"";position:fixed;inset:-50%;width:200%;height:200%;z-index:5;pointer-events:none;opacity:.11;mix-blend-mode:multiply;background-size:180px 180px;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>")}
@media (prefers-color-scheme:dark){body.one::after{opacity:.07;mix-blend-mode:screen}
 body.one{background:radial-gradient(120% 90% at 30% 20%,#30343a,#1e2125 70%,#191b1e);background-color:#22252a}}
@media (prefers-reduced-transparency:reduce){body.one::after{display:none}}
body.one::after{opacity:.2}@media (prefers-color-scheme:dark){body.one::after{opacity:.12}}

/* ---------- flat wordmark (no emboss), and the phone golf hole ---------- */
.logo{font-family:var(--logo);font-weight:400;letter-spacing:0;text-transform:lowercase;color:var(--ink);text-shadow:none}
.one .btn.solid{box-shadow:0 6px 20px rgba(0,0,0,.18)}
html[data-liquid=golf] body.one{background:#3a6a28}
html[data-liquid=golf] body.one::after{content:none}
html[data-liquid=golf] .logo{color:#fff;text-shadow:0 2px 18px rgba(0,25,0,.55)}
html[data-liquid=golf] .one .btn.solid{background:#fff;color:#16181b;box-shadow:0 8px 26px rgba(0,20,0,.4)}
html[data-liquid=golf] .one .tiny,html[data-liquid=golf] .one .tiny a{color:rgba(255,255,255,.9);text-shadow:0 1px 8px rgba(0,20,0,.6)}
html[data-liquid=golf] .tilt{color:#fff;background:rgba(0,30,0,.35);border-color:rgba(255,255,255,.35)}
html[data-liquid=golf] main{pointer-events:none}html[data-liquid=golf] main a,html[data-liquid=golf] main button{pointer-events:auto}
/* hedge-maze garden (maze-golf.js): the logo and buttons sit on the lawn clearing, painted in */
html[data-liquid=golf] body.one{background:#86a86a}
#golf{display:block;transition:opacity .45s ease}
html[data-liquid=golf] .logo{color:#fbf8ee;text-shadow:0 1px 1px rgba(40,60,25,.35),0 2px 22px rgba(30,50,20,.3)}
html[data-liquid=golf] .one .btn.solid{background:rgba(251,248,238,.93);color:#22301a;border:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 1px 1px rgba(40,60,25,.25),0 8px 20px rgba(30,50,20,.18)}
html[data-liquid=golf] .one .tiny,html[data-liquid=golf] .one .tiny a{color:rgba(251,248,238,.92);text-shadow:0 1px 2px rgba(30,50,20,.45)}
html[data-liquid=golf] .tilt{background:none;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:rgba(251,248,238,.85);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-shadow:0 1px 2px rgba(30,50,20,.45);padding:4px 8px}
@media (prefers-color-scheme:dark){html[data-liquid=golf] body.one{background:#3f5236}html[data-liquid=golf] .one .btn.solid{background:rgba(236,232,220,.9)}}