@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=DM+Sans:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f0e8;
  --paper:#fbf8f2;
  --paper-strong:#ffffff;
  --ink:#191714;
  --muted:#666157;
  --line:#d9d2c4;
  --sage:#78856b;
  --sage-dark:#445543;
  --green:#294d2d;
  --sand:#ccb488;
  --accent:#a33d24;
  --good:#2f6c39;
  --warn:#9a6a0d;
  --font-serif:'Playfair Display',Georgia,serif;
  --font-sans:'DM Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --radius:18px;
  --radius-sm:12px;
  --shadow:0 10px 30px rgba(25,23,20,.06);
}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-sans);
  background:
    radial-gradient(circle at top left, rgba(204,180,136,.14), transparent 35%),
    linear-gradient(180deg, #f9f5ee 0%, var(--bg) 100%);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.035;
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
button,input,select,textarea{font:inherit}
.shell{max-width:860px;margin:0 auto;padding:0 18px 96px}
.hero-image{width:100%;height:180px;object-fit:cover;display:block}
.hero{
  background:rgba(251,248,242,.94);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:var(--shadow);
  border-radius:0 0 22px 22px;
  margin-top:-12px;
  padding:28px 22px 22px;
}
.eyebrow,.chip-eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--sage);
}
.hero h1{
  font-family:var(--font-serif);
  font-size:clamp(32px,6.4vw,52px);
  line-height:1.02;
  margin:8px 0 10px;
}
.hero p{
  color:var(--muted);
  font-size:15px;
  max-width:520px;
}
.coach-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:18px;
  max-width:620px;
}
.coach-strip div{
  border:1px solid rgba(120,133,107,.20);
  border-radius:14px;
  padding:12px 10px;
  background:rgba(255,255,255,.44);
}
.coach-strip strong{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sage-dark);
  margin-bottom:4px;
}
.coach-strip span{
  display:block;
  color:var(--ink);
  font-size:13px;
  line-height:1.25;
}
.hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.btn-small{padding:10px 14px;min-height:40px}
body.compact-hero .hero-image{height:108px}
body.compact-hero .hero{
  padding:12px 16px 12px;
  border-radius:0 0 18px 18px;
}
body.compact-hero .hero h1{
  font-size:clamp(18px,4.8vw,26px);
  max-width:none;
  margin:4px 0 0;
}
body.compact-hero .hero p{display:none}
body.compact-hero .hero-actions{display:none}
body.compact-hero .eyebrow{font-size:10px}
.btn{
  border:none;
  border-radius:999px;
  padding:14px 20px;
  min-height:48px;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:active{transform:scale(.98)}
.btn-primary{
  background:var(--green);
  color:#fff;
  font-weight:700;
}
.btn-secondary{
  background:transparent;
  color:var(--green);
  border:1px solid rgba(41,77,45,.25);
}
.btn-ghost{
  background:rgba(255,255,255,.72);
  color:var(--ink);
  border:1px solid var(--line);
}
.top-nav{
  position:sticky;
  top:0;
  z-index:30;
  padding:10px 0 0;
  backdrop-filter:blur(18px);
}
.top-nav-inner{
  background:rgba(245,240,232,.9);
  border:1px solid rgba(217,210,196,.85);
  border-radius:999px;
  display:flex;
  gap:4px;
  padding:6px;
  overflow:auto;
  scrollbar-width:none;
}
.top-nav-inner::-webkit-scrollbar{display:none}
.nav-btn{
  flex:1;
  min-width:92px;
  padding:12px 14px;
  border:none;
  background:transparent;
  border-radius:999px;
  color:var(--muted);
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.10em;
  cursor:pointer;
}
.nav-btn.active{
  background:var(--green);
  color:#fff;
}
.screen{display:none;padding-top:20px}
.screen.active{display:block}
.grid{display:grid;gap:16px}
.launch-grid,.workflow-grid{display:grid;gap:16px}
.launch-grid{align-items:start}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(251,248,242,.96));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.card-pad{padding:22px}
.section-head{margin-bottom:16px}
.section-head h2{
  font-family:var(--font-serif);
  font-size:30px;
  margin-top:6px;
}
.section-head p{color:var(--muted);font-size:14px;margin-top:6px}
.brief-grid,.trend-grid,.tool-grid,.insight-grid,.library-grid{display:grid;gap:14px}
.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.feature-card h3{
  font-family:var(--font-serif);
  font-size:28px;
  margin:8px 0 10px;
}
.feature-card p{font-size:14px;color:var(--muted)}
.quiet-disclosure{
  box-shadow:none;
  background:rgba(251,248,242,.72);
}
.quiet-disclosure summary{
  list-style:none;
  cursor:pointer;
  display:grid;
  gap:4px;
}
.quiet-disclosure summary::-webkit-details-marker{display:none}
.quiet-disclosure summary strong{
  font-family:var(--font-serif);
  font-size:24px;
  line-height:1.1;
}
.quiet-disclosure-body{margin-top:18px}
.quiet-context{opacity:.82}
.launch-points{margin-top:16px}
.guide-list{
  display:grid;
  gap:10px;
  margin-top:18px;
}
.guide-row{
  display:grid;
  gap:4px;
  padding:14px 16px;
  border:1px solid rgba(120,133,107,.18);
  border-radius:var(--radius-sm);
  background:rgba(120,133,107,.06);
}
.guide-row strong{font-size:14px}
.guide-row span{font-size:13px;color:var(--muted)}
.card-note{
  margin-top:14px;
  padding:12px 14px;
  border-left:3px solid var(--sand);
  background:rgba(204,180,136,.12);
  font-size:13px;
  color:var(--muted);
}
.import-card{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.import-status{
  margin-top:10px;
  font-size:13px;
  color:var(--muted);
}
.import-preview{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.import-summary{
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:rgba(120,133,107,.08);
  border:1px solid rgba(120,133,107,.18);
  font-size:13px;
  color:var(--ink);
}
.import-table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper-strong);
}
.import-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
}
.import-table th,.import-table td{
  padding:10px 8px;
  border-bottom:1px solid var(--line);
  text-align:center;
}
.import-table th{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sage);
  background:rgba(120,133,107,.06);
}
.import-table tr:last-child td{border-bottom:none}
.import-confidence{
  font-size:12px;
  color:var(--muted);
}
.brief-item{
  padding:14px 16px;
  background:rgba(120,133,107,.08);
  border:1px solid rgba(120,133,107,.18);
  border-radius:var(--radius-sm);
}
.brief-item strong{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--sage-dark);
  margin-bottom:6px;
}
.brief-item span{font-size:14px;color:var(--ink)}
.tool-btn{
  width:100%;
  text-align:left;
  padding:16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--paper-strong);
  cursor:pointer;
}
.tool-btn strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}
.tool-btn span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.round-layout{display:grid;gap:16px}
.primary-tracker{
  scroll-margin-top:76px;
}
.workflow-step{
  padding:16px;
  border-radius:var(--radius-sm);
  background:var(--paper-strong);
  border:1px solid var(--line);
}
.workflow-step strong{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}
.workflow-step span{
  display:block;
  color:var(--muted);
  font-size:13px;
}
.course-row{display:grid;gap:12px}
.field-label{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--sage);
  margin-bottom:8px;
}
.field, .note-field{
  width:100%;
  border:1px solid var(--line);
  background:var(--paper-strong);
  border-radius:14px;
  padding:14px 16px;
  color:var(--ink);
}
.field:focus,.note-field:focus{outline:none;border-color:var(--sage)}
.course-results{
  display:none;
  background:var(--paper-strong);
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.course-results.active{display:block}
.course-result{
  padding:14px 16px;
  border-bottom:1px solid var(--line);
  cursor:pointer;
}
.course-result:last-child{border-bottom:none}
.course-result:hover{background:rgba(120,133,107,.06)}
.course-result-name{font-weight:700}
.course-result-meta{color:var(--muted);font-size:12px}
.selected-course{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(120,133,107,.2);
  border-radius:14px;
  background:rgba(120,133,107,.08);
}
.selected-course.active{display:flex}
.hole-bar{
  display:grid;
  gap:14px;
}
.hole-bar-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hole-title{
  text-align:center;
  flex:1;
}
.hole-title strong{
  display:block;
  font-size:44px;
  line-height:1;
}
.hole-title span{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--sage);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-top:6px;
}
.nav-arrow{
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--paper-strong);
  cursor:pointer;
}
.hole-progress{
  display:flex;
  gap:4px;
  justify-content:center;
  flex-wrap:wrap;
}
.hole-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--line);
}
.hole-dot.done{background:var(--sage-dark)}
.hole-dot.current{background:var(--green);transform:scale(1.35)}
.caddie-card{
  background:linear-gradient(160deg, #1f3322, #314d31);
  color:#fff;
  border-radius:22px;
  padding:22px;
}
.caddie-card .chip-eyebrow{color:rgba(255,255,255,.68)}
.caddie-title{
  font-family:var(--font-serif);
  font-size:26px;
  margin-top:8px;
  line-height:1.12;
}
.ai-panel{
  display:none;
  gap:16px;
}
.ai-panel.active{display:grid}
.rec-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:18px;
}
.rec-item{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:12px;
}
.rec-item strong{
  display:block;
  font-family:var(--font-mono);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(255,255,255,.72);
  margin-bottom:6px;
}
.rec-item span{font-size:14px;line-height:1.45}
.reason-block{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.86);
  font-size:14px;
}
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--paper-strong);
  color:var(--muted);
  cursor:pointer;
  min-height:42px;
}
.chip.active{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.chip.warn.active{background:var(--warn);border-color:var(--warn)}
.chip.bad.active{background:var(--accent);border-color:var(--accent)}
.chip.good.active{background:var(--good);border-color:var(--good)}
.planner-grid,.score-grid{display:grid;gap:14px}
.planner-grid{grid-template-columns:repeat(2,1fr)}
.score-grid{grid-template-columns:repeat(2,1fr)}
.tracking-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.tracking-copy{
  color:var(--muted);
  font-size:13px;
  margin-top:2px;
}
.round-setup-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(251,248,242,.96));
  box-shadow:var(--shadow);
  overflow:hidden;
}
.round-setup-card summary{
  list-style:none;
  cursor:pointer;
  padding:18px 22px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sage);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.round-setup-card summary::-webkit-details-marker{display:none}
.round-setup-card summary::after{
  content:'+';
  font-size:18px;
  line-height:1;
  color:var(--sage-dark);
}
.round-setup-card[open] summary::after{content:'−'}
.round-setup-body{
  display:grid;
  gap:16px;
  padding:0 16px 16px;
}
.stepper{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper-strong);
  padding:16px;
  text-align:center;
}
.stepper-value{
  font-size:44px;
  font-weight:700;
  line-height:1;
  margin:10px 0;
}
.stepper-controls{
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.preset-row{
  display:flex;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:12px;
}
.stepper-btn{
  width:54px;
  height:54px;
  border-radius:16px;
  border:1px solid var(--line);
  background:var(--paper);
  font-size:28px;
  cursor:pointer;
}
.mini-chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(120,133,107,.06);
  color:var(--ink);
  cursor:pointer;
}
.mini-chip:hover{border-color:var(--sage)}
.summary-strip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.summary-chip{
  padding:8px 10px;
  border-radius:999px;
  background:rgba(120,133,107,.08);
  border:1px solid rgba(120,133,107,.16);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.insight-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper-strong);
  padding:18px;
}
.insight-card h3{
  font-family:var(--font-serif);
  font-size:22px;
  margin-bottom:10px;
}
.insight-card ul{
  list-style:none;
  display:grid;
  gap:10px;
}
.insight-card li{
  padding-left:16px;
  position:relative;
  color:var(--muted);
  font-size:14px;
}
.insight-card li::before{
  content:'▸';
  position:absolute;
  left:0;
  color:var(--green);
}
.history-entry{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper-strong);
  padding:16px;
}
.history-meta{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.history-title{
  font-family:var(--font-serif);
  font-size:20px;
  margin:8px 0 6px;
}
.history-copy{color:var(--muted);font-size:14px}
.library-card{
  padding:18px;
  border-radius:18px;
  border:1px solid var(--line);
  background:var(--paper-strong);
}
.library-card h3{
  font-family:var(--font-serif);
  font-size:22px;
  margin:8px 0 8px;
}
.library-card p{font-size:14px;color:var(--muted)}
.library-list{display:grid;gap:10px;margin-top:14px}
.library-list button,
.library-list a{
  text-align:left;
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  background:var(--paper);
  text-decoration:none;
  color:var(--ink);
}
.library-list strong{
  display:block;
  font-size:14px;
  margin-bottom:4px;
}
.library-list span{
  color:var(--muted);
  font-size:13px;
}
.inline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.toast{
  position:fixed;
  left:50%;
  bottom:22px;
  transform:translateX(-50%);
  background:var(--ink);
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  font-size:13px;
  box-shadow:var(--shadow);
  display:none;
  z-index:80;
}
.toast.active{display:block}
.footer{
  padding:36px 0 12px;
  text-align:center;
  color:var(--muted);
  font-size:13px;
}
.footer a{text-decoration:none;color:var(--sage-dark)}
.hidden{display:none!important}
@media(min-width:760px){
  .tool-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .brief-grid,.trend-grid,.insight-grid,.library-grid,.launch-grid{grid-template-columns:repeat(2,1fr)}
  .course-row{grid-template-columns:1.4fr 1fr}
  .workflow-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:640px){
  .planner-grid,.score-grid,.rec-grid{grid-template-columns:1fr}
  .hero{padding:22px 18px 18px}
  .hero-image{height:150px}
  .hero-actions{grid-template-columns:1fr}
  .coach-strip{grid-template-columns:1fr;gap:6px}
  .coach-strip div{padding:10px 12px}
  .launch-grid{gap:12px}
  .launch-points{display:none}
  .quiet-context{display:none}
  .nav-btn{
    min-width:68px;
    padding:11px 9px;
    font-size:10px;
    letter-spacing:.08em;
  }
  body.compact-hero .hero-image{display:none}
  body.compact-hero .hero h1{font-size:clamp(16px,6vw,22px)}
  .tool-grid{grid-template-columns:1fr}
  .tracking-head{flex-direction:column}
  .round-setup-card summary{padding:16px 18px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
