/* Gradd homepage. Colours: yellow #F4DF7C, cream #FFF9E3, ink #1C2629, moss #2D6A4F */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#F4DF7C;color:#1C2629;font-family:Rubik,"Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#2D6A4F}a:hover{color:#1C2629}
img{max-width:none}

@keyframes gr-pulse{0%,100%{box-shadow:0 0 0 4px rgba(45,106,79,.18)}50%{box-shadow:0 0 0 8px rgba(45,106,79,.06)}}

.page{min-height:100vh;position:relative;isolation:isolate;background:#F4DF7C;color:#1C2629}

/* Texture layers */
.noise-light,.noise-dark,.topo{position:absolute;inset:0;z-index:-1;pointer-events:none}
.noise-light{opacity:.28;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 0 0.2  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}
.noise-dark{opacity:.22;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:200px 200px}

/* Hover and press states (the reference applies these over inline styles) */
.hv-dark:hover{transform:translateY(-2px)!important;background:#2A3639!important;box-shadow:0 2px 4px rgba(28,38,41,.18),0 14px 26px -12px rgba(28,38,41,.55)!important;color:#F4DF7C}
.hv-dark:active{transform:translateY(0) scale(.97)!important;transition-duration:.08s!important}
.hv-cream:hover{transform:translateY(-2px)!important;background:#FFFFFF!important;box-shadow:0 2px 4px rgba(80,60,0,.12),0 14px 28px -12px rgba(90,70,0,.5)!important;color:#1C2629}
.hv-cream:active{transform:translateY(0) scale(.97)!important;transition-duration:.08s!important}
.hv-nav:hover{text-decoration:underline!important;text-decoration-color:#2D6A4F!important;color:#2D6A4F!important}
.hv-step:hover{transform:translateY(-3px)!important;box-shadow:0 1px 2px rgba(80,60,0,.1),0 14px 28px -14px rgba(90,70,0,.45)!important}
.hv-tile:hover{transform:translateY(-4px)!important}
.hv-send:hover{transform:translateY(-2px)!important;box-shadow:0 14px 26px -12px rgba(28,38,41,.55)!important}
.hv-send:active{transform:scale(.97)!important}
.hv-press:active{transform:scale(.97)!important}
.hv-dark:focus-visible,.hv-cream:focus-visible,.hv-nav:focus-visible,.hv-tile:focus-visible,.hv-send:focus-visible,.hv-press:focus-visible,.link-btn:focus-visible{outline:3px solid #2D6A4F;outline-offset:3px}

/* Hero phone screen */
.hl{position:absolute;inset:0;overflow:hidden;will-change:transform,opacity;box-shadow:-24px 0 48px rgba(0,0,0,.18)}
.hl-img{position:absolute;left:0;right:0;top:6%;height:100%}
.hl-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.sb{position:absolute;left:0;right:0;top:0;height:6%;display:flex;align-items:center;justify-content:space-between;padding:0 13% 0 14%;font-weight:700;font-size:13px}
.sb-island{position:absolute;left:50%;top:28%;transform:translateX(-50%);width:30%;height:52%;border-radius:999px;background:#000}
.sb-bars{display:flex;gap:3px;align-items:flex-end}
.sb-bars>i{width:3px;border-radius:1px;background:currentColor}
.sb-batt{width:22px;height:11px;border-radius:3px;border:1.5px solid currentColor;margin-left:5px;padding:1.5px;display:flex}
.sb-batt>i{flex:1;border-radius:1px;background:currentColor}
.abs{position:absolute;pointer-events:none}

/* Sessions mock */
.s-btn{height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px}
.s-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;border:2px solid #F4DF7C;margin-left:-8px}
.s-row{overflow:hidden}
.s-row-in{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:9px 14px 9px 10px;border-radius:18px;background:#FFF9E3;box-shadow:0 1px 2px rgba(80,60,0,.1),0 8px 24px -14px rgba(90,70,0,.4)}
.s-thumb{width:40px;aspect-ratio:63/88;border-radius:5px;overflow:hidden}
.s-thumb img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);display:block}
.s-grade{font-weight:800;font-size:13px;height:26px;padding:0 11px;display:flex;align-items:center;border-radius:13px;white-space:nowrap}
.s-ripple{position:absolute;width:70px;height:70px;border-radius:50%;background:rgba(255,249,227,.7);pointer-events:none;z-index:8}
.s-digit{width:48px;aspect-ratio:63/88;border-radius:7px;background:#1C2629;color:#F4DF7C;font-weight:800;font-size:26px;display:flex;align-items:center;justify-content:center}

/* Review picker */
.tile{all:unset;box-sizing:border-box;cursor:pointer;aspect-ratio:63/88;border-radius:6px;font-family:Rubik,sans-serif;font-weight:800;font-size:clamp(14px,1.6vw,18px);display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s,transform .25s cubic-bezier(.2,.9,.3,1.3)}
.link-btn{all:unset;cursor:pointer;font-family:Rubik,sans-serif;font-weight:700;font-size:15px;color:#2D6A4F}

/* Mobile sticky bar: hidden unless phone */
.mbar{display:none}

@media (max-width:719.98px){
  .nav-link{display:none!important}
  [data-m-hide],[data-m-hero]{display:none!important}
  .hero-grid{gap:36px!important;padding-bottom:48px!important}
  .mbar{display:flex}
}

/* Reduced motion: hero and Sessions loops hold still. The hero holds on its
   first screen once the card is in frame (1.9s); Sessions holds on frame one. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-hero3d] *{animation-play-state:paused!important;animation-delay:-1.9s!important}
  #sessions *{animation-play-state:paused!important;animation-delay:0s!important}
}