/* HeartCubby base: elements, layout, header, cards, buttons, segmented controls, footer.
   Flat surfaces, no shadows, separation by space and tone, never a single-sided border.
   Kept identical in site/shared and binder/shared. */
*,*::before,*::after{box-sizing:border-box}
/* no double-tap zoom anywhere (pinch zoom stays on); iOS reads it up to the nearest scroller */
html,*{touch-action:manipulation}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:17px/1.5 var(--font);
  -webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(34px,6vw,56px);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(24px,3.6vw,32px);font-weight:700}
h3{font-size:19px;font-weight:600}
p{margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-60px;background:var(--surface);color:var(--txt);
  padding:10px 14px;border-radius:var(--radius-s);z-index:10}
.skip:focus{top:10px}

/* layout */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 max(var(--gutter),env(safe-area-inset-right)) 0 max(var(--gutter),env(safe-area-inset-left))}
.stack>*+*{margin-top:16px}
.lede{font-size:clamp(18px,2.2vw,21px);color:var(--dim);max-width:40em}
.lab{font:600 12px/1.2 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--dim2)}

/* header */
.top{position:sticky;top:0;z-index:5;background:var(--bg);padding-top:env(safe-area-inset-top)}
.top .wrap{display:flex;align-items:center;gap:12px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);font:700 19px/1 var(--font-display);letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.logo{width:32px;height:32px;flex:none}
.logo .box{fill:var(--accent)}
.logo .cubby{fill:var(--accent-deep)}
.logo .heart{fill:var(--accent-ink)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.top nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--txt);padding:0 14px;border-radius:var(--pill);font-size:15px;white-space:nowrap}
.top nav a:hover{background:var(--fill2);text-decoration:none}

/* cards */
.card{background:var(--surface);border-radius:var(--radius);padding:22px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.icon{width:40px;height:40px;border-radius:12px;background:var(--accent-soft);display:grid;place-items:center;margin-bottom:14px}
.icon svg{width:22px;height:22px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:6px}
.card p{color:var(--dim);font-size:16px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;
  border:0;border-radius:var(--pill);background:var(--accent);color:var(--accent-ink);font:600 16px/1 var(--font);
  cursor:pointer;white-space:nowrap}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn.quiet{background:var(--fill2);color:var(--txt)}
.actions{display:flex;flex-wrap:wrap;gap:10px}

/* segmented control (appearance) */
.seg{display:inline-flex;gap:2px;padding:2px;background:var(--fill2);border-radius:var(--radius-s)}
.seg button{min-height:36px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--txt);
  font:500 14px/1 var(--font);cursor:pointer;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--surface);font-weight:600}

/* footer */
.foot{padding:40px 0 calc(40px + env(safe-area-inset-bottom));color:var(--dim2);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{color:var(--dim)}
.foot nav a{display:inline-flex;align-items:center;min-height:32px}
.foot .grow{flex:1 1 auto}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}