/* alcohol tracker page — still water at night, terracotta on near-black, on tinkersmith bones.
   the one page built from the app's own palette: warm charcoal ground,
   terracotta for data, moss for banked dry days, brass for the edge. */
:root{--tide:#E0643C;--tide-hi:#EE8560;--tide-dim:rgba(224,100,60,.16);--moss:#618A5E;--moss-hi:#8CBA88;--brass:#D99A2B;--dngr:#C23524;--still-950:#0F0F0E;--still-900:#161310;--still-glass:rgba(34,38,36,.52);--foam:#F2EBE2}
html{scroll-behavior:smooth}
body{background:var(--still-950);overflow-x:hidden}
::selection{background:var(--tide);color:var(--still-950)}
a{color:var(--tide-hi)}a:hover{color:var(--foam)}
.ic{display:inline-block;font-style:normal}
.kick{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--tide-hi);margin:0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:var(--weight-semibold);border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;text-decoration:none;transition:transform var(--dur-1) var(--ease-strike),background-color var(--dur-2) var(--ease-glide),box-shadow var(--dur-2) var(--ease-glide),border-color var(--dur-2) var(--ease-glide)}
.btn:active{transform:scale(.96)}
.btn-sm{height:34px;padding:0 16px;font-size:var(--text-sm)}
.btn-lg{height:52px;padding:0 28px;font-size:var(--text-md)}
.btn-tide{background:var(--tide);color:#fff}
.btn-tide:hover{background:var(--tide-hi);color:var(--still-950);box-shadow:0 0 0 1px rgba(238,133,96,.3),0 0 30px -4px rgba(224,100,60,.6)}
.btn-ghost{background:transparent;color:var(--tide-hi);border-color:rgba(238,133,96,.4)}
.btn-ghost:hover{border-color:var(--tide-hi);color:var(--foam);box-shadow:0 0 24px -6px rgba(224,100,60,.5)}
/* nav */
#anav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:var(--space-8);padding:14px max(4vw,24px);transition:background var(--dur-3) var(--ease-glide),border-color var(--dur-3) var(--ease-glide);border-bottom:1px solid transparent}
#anav.scrolled{background:rgba(15,15,14,.74);backdrop-filter:var(--blur-frost);-webkit-backdrop-filter:var(--blur-frost);border-color:var(--border-subtle)}
#anav .lock{display:flex;align-items:center;gap:10px;text-decoration:none}
#anav .mark{width:24px;height:24px;color:var(--ember-500)}
#anav .wm{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:17px;letter-spacing:var(--tracking-tight);color:var(--text-primary)}
#anav .wm em{font-style:normal;color:var(--ember-500)}
#anav .crumb{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--tide-hi)}
#anav .links{display:flex;gap:var(--space-6);margin-left:auto}
#anav .links a{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-secondary)}
#anav .links a:hover{color:var(--text-primary)}
/* hero */
.ahero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
#stillwater{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tidehaze{position:absolute;inset:0;pointer-events:none;background:radial-gradient(55% 46% at 24% 112%,rgba(224,100,60,.24),rgba(224,100,60,.06) 46%,transparent 70%),radial-gradient(42% 34% at 84% -8%,rgba(238,133,96,.1),transparent 70%),radial-gradient(30% 26% at 66% 96%,rgba(97,138,94,.09),transparent 70%)}
/* the surface — a faint water line breathing across the hero's lower third */
.waterline{position:absolute;left:-10%;right:-10%;bottom:16%;height:120px;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(238,133,96,.045) 45%,rgba(238,133,96,.08) 50%,rgba(224,100,60,.03) 58%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);animation:tideswell 9s var(--ease-smooth) infinite alternate}
@keyframes tideswell{from{transform:translateY(-9px) skewY(.4deg)}to{transform:translateY(9px) skewY(-.4deg)}}
.float-bit{position:absolute;pointer-events:none;will-change:transform}
.bit-drop{display:block;width:44px;height:44px;border:1.5px solid rgba(238,133,96,.36);border-radius:50% 50% 50% 12%;transform:rotate(45deg)}
.bit-bubbles{display:flex;gap:12px;align-items:flex-end}
.bit-bubbles i{width:9px;height:9px;border-radius:99px;border:1.5px solid rgba(238,133,96,.36)}
.bit-bubbles i:nth-child(2){width:13px;height:13px;margin-bottom:10px}
.bit-bubbles i:nth-child(3){width:7px;height:7px}
.bit-glass{display:flex;align-items:flex-end;width:52px;height:66px;border:1.5px solid rgba(238,133,96,.3);border-radius:8px 8px 20px 20px;overflow:hidden}
.bit-glass i{display:block;width:100%;height:36%;background:rgba(224,100,60,.16)}
.bit-ring{display:block;width:120px;height:120px;border-radius:99px;border:1.5px dashed rgba(97,138,94,.3)}
.ahero-inner{position:relative;display:flex;align-items:center;gap:var(--space-16);max-width:1200px;margin:0 auto;padding:130px max(4vw,24px) 70px;width:100%}
.ahero-copy{flex:1;min-width:0;position:relative}
.ahero-copy h1{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(52px,6.6vw,100px);line-height:.96;letter-spacing:var(--tracking-tight);margin:var(--space-4) 0}
.ahero-copy h1 em{position:relative;font-style:normal;display:inline-block;
  /* an empty glass: a ghosted wall the liquid can visibly rise inside */
  color:rgba(242,235,226,.13);
  -webkit-text-stroke:1.4px rgba(238,133,96,.42);
  text-shadow:0 0 34px rgba(224,100,60,.18);
  animation:still-glow 4.5s var(--ease-smooth) infinite alternate}
@keyframes still-glow{from{-webkit-text-stroke-color:rgba(238,133,96,.32)}to{-webkit-text-stroke-color:rgba(238,133,96,.62)}}
/* the pour — liquid inside the wordmark, driven by the phone demo */
#wordpour-cv{position:absolute;pointer-events:none;z-index:3;filter:drop-shadow(0 0 18px rgba(224,100,60,.35))}
#fizz-cv{position:absolute;pointer-events:none;z-index:3}
.atag{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:clamp(20px,2vw,27px);margin:0 0 var(--space-4)}
.asub{color:var(--text-secondary);font-size:var(--text-md);max-width:540px;margin:0 0 var(--space-8);text-wrap:pretty}
.asub b{color:var(--tide-hi)}
.acta{display:flex;gap:var(--space-4);flex-wrap:wrap}
.hint{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);margin:var(--space-6) 0 0}
.rise{animation:rise .9s var(--ease-strike) both;animation-delay:calc(var(--i)*70ms)}
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
/* phone */
.phone-wrap{position:relative;flex:none;will-change:transform}
.phone-glow{position:absolute;inset:-14%;background:radial-gradient(50% 50% at 50% 55%,rgba(224,100,60,.26),transparent 70%);z-index:-1;pointer-events:none}
.aphone{width:330px;border-radius:44px;background:linear-gradient(160deg,#33332E,#161310);border:1px solid rgba(238,133,96,.22);padding:11px;box-shadow:var(--shadow-3),0 0 60px -12px rgba(224,100,60,.35);animation:bob 8s var(--ease-smooth) infinite alternate}
@keyframes bob{from{transform:translateY(-7px) rotate(.4deg)}to{transform:translateY(7px) rotate(-.4deg)}}
/* the screen is the app: warm cream, white cards, terracotta intake —
   lifted from the v2 prototype (page #EFECE7 / card #FFF / ink #141413) */
.ascreen{position:relative;border-radius:34px;background:#EFECE7;color:#141413;overflow:hidden;padding:12px 14px 72px;font-family:var(--font-body);text-align:left}
.ascreen *{box-sizing:border-box}
.statusbar{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10.5px;color:#8D8478;padding:2px 6px 8px}
.ahead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.aday{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.16em;color:#8D8478;margin:0;font-weight:700}
.ahead h4{font-family:var(--font-display);font-weight:var(--weight-black);font-size:23px;letter-spacing:var(--tracking-tight);margin:1px 0 0;color:#141413;transition:color var(--dur-3) var(--ease-glide)}
.ascreen.dry .ahead h4{color:#4C6B49}
.adate{font-size:10px;color:#8D8478;margin:1px 0 0}
.streakchip{flex:none;font-family:var(--font-mono);font-size:9px;color:#4C6B49;background:#fff;border:1px solid #E7E2DA;border-radius:99px;padding:5px 9px;margin-top:2px}
.streakchip.pop{animation:chip-pop .5s var(--ease-strike)}
@keyframes chip-pop{40%{transform:scale(1.14)}}
.probanner{display:flex;align-items:center;gap:9px;background:#F9E2D9;border-radius:14px;padding:8px 11px;margin:10px 0 0;color:#B04A22}
.pb-ic{width:13px;height:13px;flex:none}
.pb-t{flex:1;min-width:0}
.pb-t b{display:block;font-size:11px;font-weight:700;color:#8E3A18}
.pb-t span{display:block;font-size:9px;color:#A9683B}
.pb-go{font-size:15px;line-height:1;color:#B04A22}
.slot-label{font-family:var(--font-mono);font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#8D8478;margin:10px 2px 6px;font-weight:700}
/* the usual? — the app's one-tap chips, horizontally scrollable */
.usualrow{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:0 -2px;padding:2px 2px 4px}
.usualrow::-webkit-scrollbar{display:none}
.drink{position:relative;flex:none;display:flex;align-items:center;gap:7px;background:#fff;border:1px solid #E7E2DA;border-radius:14px;padding:6px 9px 6px 6px;transition:border-color var(--dur-2) var(--ease-glide),background var(--dur-2) var(--ease-glide)}
.drink.logged{border-color:rgba(224,100,60,.6);background:#FBEFE9}
.dadd{width:26px;height:26px;border-radius:99px;border:none;background:#F9E2D9;color:#E0643C;cursor:pointer;flex:none;position:relative;transition:background var(--dur-2) var(--ease-glide),transform var(--dur-1) var(--ease-strike)}
.dadd::after{content:'+';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;line-height:1;padding-bottom:1px}
.dadd:hover{background:#F4CDBC}
.dadd:active{transform:scale(.85)}
.drink.logged .dadd{background:var(--tide);color:#fff}
.drink.logged .dadd::after{content:'✓';font-size:12px}
.dtxt{min-width:0}
.dtxt b{display:block;font-size:11px;font-weight:700;white-space:nowrap;color:#141413}
.dtxt span{display:block;font-size:9px;color:#8D8478;white-space:nowrap}
.du{font-family:var(--font-mono);font-size:9px;color:#B04A22;white-space:nowrap;font-variant-numeric:tabular-nums;align-self:flex-start;margin-top:2px}
.drink.nofit .du{color:#8F6416}
.dflag{display:none;position:absolute;top:-7px;right:7px;font-family:var(--font-mono);font-size:7px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8F6416;background:#FBEED3;border:1px solid #E5C878;padding:2px 5px;border-radius:7px;white-space:nowrap}
.drink.nofit .dflag{display:inline-block}
/* intake — the big terracotta card; colour carries the day's verdict */
.intake{position:relative;background:var(--tide);border-radius:18px;padding:11px 13px 10px;margin-top:9px;color:#fff;transition:background .6s var(--ease-glide);box-shadow:0 12px 28px -14px rgba(224,100,60,.65)}
.ascreen.warm .intake{background:#C9822A}
.ascreen.over .intake{background:var(--dngr)}
.ascreen.dry .intake{background:var(--moss)}
.in-top{display:flex;justify-content:space-between;align-items:center}
.in-name{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.in-info{width:16px;height:16px;border-radius:99px;background:rgba(255,255,255,.22);color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;font-style:normal;font-family:var(--font-mono)}
/* the tiny glass beside the word — fills with the day, checks when banked */
.ringglass{position:relative;width:14px;height:18px;border:1.5px solid rgba(255,255,255,.8);border-radius:3px 3px 6px 6px;overflow:hidden;background:rgba(255,255,255,.14);flex:none}
.rg-liquid{position:absolute;left:0;right:0;bottom:0;height:0%;background:rgba(255,255,255,.9);transition:height .7s var(--ease-strike)}
.rg-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-style:normal;color:#fff;transform:scale(0)}
.ascreen.dry .rg-check{animation:check-pop .5s var(--ease-strike) both}
@keyframes check-pop{from{transform:scale(0)}60%{transform:scale(1.3)}to{transform:scale(1)}}
.in-main{display:flex;align-items:center;justify-content:space-between;margin-top:5px}
.in-num b{display:block;font-family:var(--font-display);font-weight:var(--weight-black);font-size:38px;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight)}
.in-num span{display:block;font-size:10px;color:rgba(255,255,255,.88);margin-top:3px;font-weight:600}
.aring{width:60px;height:60px;overflow:visible;flex:none;margin-right:2px}
.aring-bg{fill:none;stroke:rgba(255,255,255,.28);stroke-width:12}
.aring-fg{fill:none;stroke:#fff;stroke-width:12;stroke-linecap:round;stroke-dasharray:351.9;stroke-dashoffset:351.9;transition:stroke-dashoffset .9s var(--ease-strike)}
.in-bars{display:flex;align-items:flex-end;gap:5px;margin:10px 0 9px;height:26px}
.in-bars i{width:7px;border-radius:3px;background:rgba(40,14,6,.32);height:calc(4px + var(--h,0)*22px);transition:height .6s var(--ease-strike)}
.in-bars #abartoday{background:#fff}
.in-bars span{margin-left:auto;font-size:8.5px;color:rgba(255,255,255,.85);font-family:var(--font-mono)}
.in-foot{display:flex;justify-content:space-between;align-items:center}
.in-pill{font-size:9.5px;font-weight:700;background:rgba(255,255,255,.26);color:#fff;border-radius:99px;padding:5px 10px}
.in-goal{font-size:9.5px;color:rgba(255,255,255,.88);font-weight:600}
/* the mirror line — colour may judge, copy may not */
.mirrorline{font-size:10.5px;line-height:1.45;color:#6E6558;margin:9px 3px 0;min-height:15px}
.workline{font-family:var(--font-mono);font-size:9px;color:#9D9386;margin:4px 3px 0;font-variant-numeric:tabular-nums;transition:color var(--dur-2)}
.workline.lit{color:#B04A22}
.baccard{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #E7E2DA;border-radius:14px;padding:8px 11px;margin-top:9px}
.bc-ic{width:13px;height:13px;color:#8D8478;flex:none}
.bc-t{flex:1;min-width:0}
.bc-t b{display:block;font-size:11px;color:#141413}
.bc-t span{display:block;font-size:9px;color:#8D8478}
.probadge{font-family:var(--font-mono);font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#B04A22;background:#F9E2D9;border-radius:99px;padding:3px 7px}
.enthead{display:flex;justify-content:space-between;align-items:center;margin:9px 2px 5px}
.entn{font-family:var(--font-mono);font-size:9px;color:#8D8478}
.entries{height:78px;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:6px}
.entries::-webkit-scrollbar{display:none}
.eempty{font-size:10px;color:#9D9386;background:#fff;border:1px dashed #DDD6CB;border-radius:12px;padding:11px;text-align:center;margin:0}
.entry{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #E7E2DA;border-radius:12px;padding:6px 10px;animation:entry-in .45s var(--ease-strike)}
@keyframes entry-in{from{opacity:0;transform:translateY(8px)}}
.gpip{position:relative;width:15px;height:20px;border:1.5px solid #D9BFAF;border-radius:3px 3px 6px 6px;overflow:hidden;flex:none;background:#FDF9F5}
.gpip i{position:absolute;left:0;right:0;bottom:0;background:rgba(224,100,60,.7)}
.entry .dtxt b{font-size:11px}
.entry .dtxt span{font-size:8.5px}
.edu{margin-left:auto;text-align:right;font-family:var(--font-display);font-weight:800;font-size:12.5px;color:#141413;font-variant-numeric:tabular-nums}
.edu i{display:block;font-style:normal;font-family:var(--font-mono);font-size:7.5px;color:#8D9478;color:#8D8478;font-weight:400}
/* dry-day bank */
.drybtn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:8px;padding:9px 0;font-family:var(--font-display);font-size:12px;font-weight:700;color:#4C6B49;background:#fff;border:1px solid #CBDCC6;border-radius:99px;cursor:pointer;transition:background var(--dur-2) var(--ease-glide),transform var(--dur-1) var(--ease-strike),color var(--dur-2)}
.drybtn em{font-style:normal;font-weight:800}
.drybtn:hover{background:#EAF3E7}
.drybtn:active{transform:scale(.97)}
.ascreen.dry .drybtn{background:var(--moss);color:#fff;border-color:var(--moss)}
/* floating dock + fab, as shipped */
.dock{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:center;gap:8px}
.dockbar{flex:1;display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid #E7E2DA;border-radius:99px;padding:6px 13px 6px 6px;box-shadow:0 10px 24px -12px rgba(25,12,6,.4)}
.dpill{display:flex;align-items:center;gap:6px;background:#EFECE7;border-radius:99px;padding:5px 11px}
.dpill em{font-style:normal;font-size:10px;font-weight:700;color:#141413}
.dic{width:16px;height:16px;color:#9D9386}
.dic.on{color:#141413}
.fab{width:44px;height:44px;flex:none;border-radius:99px;background:var(--tide);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -8px rgba(224,100,60,.7);transition:background .6s var(--ease-glide)}
.ascreen.over .fab{background:var(--dngr)}
.fab svg{width:20px;height:20px;color:#fff}
/* the undo toast — the app's signature moment */
.atoast{position:absolute;left:20px;right:20px;bottom:68px;display:none;align-items:center;gap:10px;background:#141413;color:#F2EBE2;border-radius:99px;padding:9px 8px 9px 16px;font-size:11px;box-shadow:0 14px 30px -12px rgba(0,0,0,.5);overflow:hidden}
.atoast.show{display:flex;animation:toast-rise .45s var(--ease-strike)}
@keyframes toast-rise{from{opacity:0;transform:translateY(14px) scale(.92)}}
.atoast span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atoast button{font-family:var(--font-display);font-weight:800;font-size:11px;text-transform:lowercase;color:#FFD9A0;background:rgba(217,154,43,.28);border:none;border-radius:99px;padding:5px 12px;cursor:pointer}
.atoast button:hover{background:rgba(217,154,43,.45)}
.atoast .tbar{position:absolute;left:0;bottom:0;height:2.5px;background:var(--tide);width:100%;transform-origin:left}
.atoast.show .tbar{animation:tbar 5s linear forwards}
@keyframes tbar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* rising fizz on dry-day bank */
#fizzbox{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fizz{position:absolute;bottom:-12px;width:7px;height:7px;border-radius:99px;border:1.5px solid rgba(97,138,94,.75);animation:fizzrise 1.8s var(--ease-glide) forwards}
.fizz.tide{border-color:rgba(224,100,60,.75)}
@keyframes fizzrise{to{transform:translateY(-560px) translateX(var(--fx)) scale(.5);opacity:0}}
/* log burst */
.spark-bit{position:absolute;width:5px;height:5px;border-radius:99px;background:var(--tide);pointer-events:none;animation:burst .7s var(--ease-glide) forwards}
@keyframes burst{to{transform:translate(var(--bx),var(--by)) scale(0);opacity:0}}
/* features */
.afeat{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);max-width:1200px;margin:0 auto;padding:var(--space-24) max(4vw,24px)}
.fitem{background:var(--still-glass);border:1px solid rgba(238,133,96,.12);border-radius:var(--radius-lg);padding:var(--space-6);backdrop-filter:blur(8px);transition:border-color var(--dur-2) var(--ease-glide),transform var(--dur-2) var(--ease-strike)}
.fitem:hover{border-color:rgba(238,133,96,.4);transform:translateY(-4px)}
.fitem svg{width:24px;height:24px;color:var(--tide-hi);margin-bottom:12px}
.fitem b{display:block;font-family:var(--font-display);font-size:var(--text-md);font-weight:var(--weight-bold);margin-bottom:6px;letter-spacing:var(--tracking-tight)}
.fitem p{margin:0;font-size:var(--text-sm);color:var(--text-secondary);text-wrap:pretty}
/* party trick — the receipt */
.awork{display:flex;align-items:center;gap:var(--space-16);max-width:1140px;margin:0 auto;padding:var(--space-16) max(4vw,24px) var(--space-24)}
.wcopy{flex:1;min-width:0}
.wcopy h2{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(34px,4.6vw,58px);letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);margin:var(--space-3) 0 var(--space-4)}
.wcopy h2 em{font-style:normal;color:var(--tide-hi)}
.wsub{color:var(--text-secondary);font-size:var(--text-md);max-width:470px;margin:0 0 var(--space-6);text-wrap:pretty}
.wnote{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text-muted);margin:0;max-width:470px}
.wnote b{color:var(--tide-hi)}
.wcards{flex:none;display:flex;flex-direction:column;gap:var(--space-8)}
.receipt{display:flex;flex-direction:column;gap:10px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-8);transform:rotate(1.6deg);box-shadow:var(--shadow-3)}
.rc-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rc-row i{font-style:normal;color:var(--text-muted);font-family:var(--font-mono)}
.rc-chip{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;padding:7px 11px;border-radius:10px;white-space:nowrap}
.c-tide{color:var(--tide-hi);background:rgba(224,100,60,.14);border:1px solid rgba(224,100,60,.4)}
.c-amber{color:var(--brass);background:rgba(217,154,43,.12);border:1px solid rgba(217,154,43,.4)}
.c-dim{color:var(--text-secondary);background:rgba(242,235,226,.06);border:1px solid var(--border-subtle)}
.c-moss{color:var(--moss-hi);background:rgba(97,138,94,.13);border:1px solid rgba(97,138,94,.45)}
.rc-result{opacity:0}
.receipt.in .rc-result{animation:result-pop .55s var(--ease-strike) .5s both}
@keyframes result-pop{0%{opacity:0;transform:scale(2.2) rotate(6deg)}60%{opacity:1;transform:scale(.95)}100%{opacity:1;transform:scale(1)}}
.rc-cap{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.bankcard{position:relative;display:flex;flex-direction:column;gap:4px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-10);transform:rotate(-2deg);box-shadow:var(--shadow-3)}
.bk-day{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-xl);letter-spacing:var(--tracking-tight)}
.bk-note{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted)}
.banked{position:absolute;top:-20px;right:-20px;font-family:var(--font-mono);font-size:var(--text-md);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--moss-hi);border:3px solid var(--moss-hi);border-radius:10px;padding:8px 14px;background:rgba(15,15,14,.85);transform:rotate(7deg);opacity:0}
.bankcard.in .banked{animation:bank-slam .5s var(--ease-strike) .45s both}
@keyframes bank-slam{0%{opacity:0;transform:rotate(22deg) scale(2.6)}60%{opacity:1;transform:rotate(5deg) scale(.94)}100%{opacity:1;transform:rotate(7deg) scale(1)}}
/* policies */
.apol{max-width:1200px;margin:0 auto;padding:var(--space-8) max(4vw,24px) var(--space-24)}
.sec-head h2{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(32px,4vw,52px);letter-spacing:var(--tracking-tight);margin:var(--space-3) 0 var(--space-10)}
.polgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6);max-width:1100px}
.polcard{display:flex;flex-direction:column;gap:10px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-6);text-decoration:none;color:var(--text-primary);transition:transform var(--dur-2) var(--ease-strike),border-color var(--dur-2) var(--ease-glide),box-shadow var(--dur-2) var(--ease-glide)}
.polcard:hover{transform:translateY(-4px);border-color:rgba(224,100,60,.45);box-shadow:0 0 0 1px rgba(224,100,60,.2),0 0 30px -6px rgba(224,100,60,.4);color:var(--text-primary)}
.polcard svg{width:26px;height:26px;color:var(--tide-hi)}
.polcard b{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-bold);letter-spacing:var(--tracking-tight)}
.polcard p{margin:0;font-size:var(--text-sm);color:var(--text-secondary);flex:1;text-wrap:pretty}
.polcard .go{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--tide-hi)}
.polcard .go .ic{transition:transform var(--dur-2) var(--ease-strike);display:inline-block}
.polcard:hover .go .ic{transform:translateX(5px)}
[data-reveal]{opacity:0;transform:translateY(30px);transition:opacity .8s var(--ease-glide) var(--d,0s),transform .8s var(--ease-strike) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
.receipt[data-reveal]{transform:translateY(30px) rotate(1.6deg)}
.receipt[data-reveal].in{transform:rotate(1.6deg)}
.bankcard[data-reveal]{transform:translateY(30px) rotate(-2deg)}
.bankcard[data-reveal].in{transform:rotate(-2deg)}
/* footer */
.afoot{text-align:center;padding:var(--space-16) 24px var(--space-12);border-top:1px solid var(--border-subtle)}
.disc{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-muted);margin:0 0 var(--space-4)}
.back{font-family:var(--font-display);font-weight:var(--weight-semibold)}
.back em{font-style:normal;color:var(--ember-500)}
@media (max-width:980px){.ahero-inner{flex-direction:column;text-align:center}.ahero-copy .acta{justify-content:center}.asub{margin-inline:auto}.afeat{grid-template-columns:repeat(2,1fr)}.awork{flex-direction:column;align-items:flex-start;gap:var(--space-12)}.wcards{margin-inline:auto}.polgrid{grid-template-columns:1fr}#anav .links{display:none}}
@media (max-width:560px){.afeat{grid-template-columns:1fr}.receipt{transform:rotate(0)}.receipt[data-reveal].in{transform:none}}
@media (prefers-reduced-motion:reduce){.rise,.aphone,.ahero-copy h1 em,.waterline,.atoast.show,.dropicon.breathe{animation:none!important}[data-reveal]{opacity:1;transform:none;transition:none}.receipt.in .rc-result,.bankcard.in .banked{animation:none;opacity:1}.atoast.show .tbar{animation:tbar 5s linear forwards}html{scroll-behavior:auto}}
