/* Shared tools for v3: the year tool, "attached to your request", reveal on scroll, chips. Lifted from round3/pieces.css. */
:root{--bar:#7E918B}

.strike{text-decoration:line-through;text-decoration-color:var(--orange);text-decoration-thickness:.08em}
.chip{display:inline-flex;align-items:center;gap:6px;font:500 .78rem/1.2 var(--sans);padding:.5em .85em;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);color:var(--mute)}
.night .chip{box-shadow:inset 0 0 0 1px var(--rule-d);color:var(--mist)}
.night .yt .chip{box-shadow:inset 0 0 0 1px var(--rule);color:var(--mute)}
/* reveal on scroll: pieces add data-rv; still mode shows everything at once */
.js [data-rv]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-rv].in{opacity:1;transform:none}
.still [data-rv]{opacity:1!important;transform:none!important;transition:none!important}

/* "attached to your request" note */
.atc-toast{position:fixed;left:50%;bottom:20px;z-index:80;width:min(560px,calc(100% - 32px));transform:translate(-50%,24px);opacity:0;pointer-events:none;background:var(--ink);color:#F2F4F1;border-radius:18px;padding:16px 48px 16px 18px;box-shadow:0 18px 50px rgba(18,36,32,.25);transition:opacity .3s,transform .4s var(--ease);font-size:.92rem;line-height:1.45}
.atc-toast.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.atc-toast b{display:block;font-weight:600;margin-bottom:4px}
.atc-toast b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:1px}
.atc-toast small{display:block;color:#A9B8B3;margin-top:6px;font-size:.78rem}
.atc-toast button{position:absolute;top:6px;right:6px;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#F2F4F1;cursor:pointer;font-size:1.1rem}

/* ===== Year tool: "Your year, on paper" ===== */
.yt{background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:24px;padding:clamp(18px,3vw,36px)}
.yt-top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between}
.yt-tabs{display:inline-flex;flex-wrap:wrap;padding:4px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--rule);gap:2px}
.yt-tabs button{border:0;background:none;min-height:40px;padding:.62em 1.05em;border-radius:999px;font:500 .88rem/1 var(--sans);cursor:pointer;color:var(--mute);transition:background .2s,color .2s}
.yt-tabs button:hover{color:var(--ink)}
.yt-tabs button[aria-selected="true"]{background:var(--ink);color:var(--salt)}
.yt-panel{margin-top:22px}
.yt-panel[hidden]{display:none}
.yt-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px}
.yt-field label{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;color:var(--mute)}
.yt-field output{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.yt-field input[type=range]{width:100%;margin-top:8px;accent-color:var(--ink)}
.yt-seasons{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:20px;font-size:.86rem;color:var(--mute)}
.yt-seasons span{margin-right:6px}
.yt-seasons button{border:0;cursor:pointer;border-radius:999px;min-height:40px;min-width:44px;padding:.45em .7em;font:500 .8rem/1 var(--sans);background:var(--salt);color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.yt-seasons button[data-s="busy"]{background:var(--ink);color:var(--salt);box-shadow:none}
.yt-seasons button[data-s="slow"]{background:transparent;color:var(--mute);box-shadow:inset 0 0 0 1px var(--rule);text-decoration:underline dotted var(--mute);text-underline-offset:3px}
.yt-seasons small{flex-basis:100%;margin-top:4px;font-size:.78rem}

.yt-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.84rem;color:var(--mute);margin:26px 0 14px}
.yt-legend span{display:inline-flex;align-items:center;gap:8px}
.yt-legend i{display:inline-block;flex:none}
.k-in{width:12px;height:12px;border-radius:3px;background:var(--bar)}
.k-bill{width:18px;height:2px;background:var(--ink)}
.k-gap{width:12px;height:12px;border-radius:3px;background:var(--orange)}

.yt-plotwrap{position:relative;padding-left:46px}
.yt-plot{position:relative;height:clamp(210px,30vw,300px)}
.yt-grid{position:absolute;inset:0;pointer-events:none}
.yt-grid div{position:absolute;left:0;right:0;border-top:1px solid var(--rule)}
.yt-grid div:first-child{border-top-color:#AEBBB6}
.yt-grid span{position:absolute;right:calc(100% + 8px);top:-.62em;font-size:.7rem;color:var(--mute);white-space:nowrap;font-variant-numeric:tabular-nums}
.yt-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2px,.7vw,10px)}
.yt-col{position:relative;cursor:ns-resize;touch-action:none;border-radius:6px;transition:background .2s}
.yt-col:hover,.yt-col:focus-visible,.yt-col.drag{background:rgba(18,36,32,.045)}
.yt-col:focus-visible{outline-offset:1px}
.yt-in{position:absolute;left:14%;right:14%;bottom:0;background:var(--bar);border-radius:4px 4px 0 0;transition:height .55s var(--ease)}
.yt-gap{position:absolute;left:14%;right:14%;background:var(--orange);border-radius:4px 4px 0 0;transition:bottom .55s var(--ease),height .55s var(--ease),opacity .3s}
.yt-bill{position:absolute;left:2%;right:2%;height:2px;background:var(--ink);transform:translateY(1px);transition:bottom .55s var(--ease)}
.yt-col.drag .yt-in,.yt-col.drag .yt-gap,.yt-col.drag .yt-bill{transition:none}
.yt.pre .yt-in{height:0!important}
.yt.pre .yt-gap{opacity:0}
.yt-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2px,.7vw,10px);margin-top:8px;font-size:.74rem;color:var(--mute);text-align:center}
.yt-months span.red{color:var(--ink);font-weight:600}
.yt-tip{position:absolute;z-index:5;pointer-events:none;background:var(--ink);color:#F2F4F1;border-radius:10px;padding:9px 11px;font-size:.78rem;line-height:1.4;white-space:nowrap;opacity:0;transform:translate(-50%,-100%);transition:opacity .15s;font-variant-numeric:tabular-nums}
.yt-tip.on{opacity:1}
.yt-tip b{display:block;font-weight:600;margin-bottom:2px}

.yt-track{margin-top:22px}
.yt-track p{font-size:.8rem;color:var(--mute);margin-bottom:8px}
.yt-trow{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(2px,.7vw,10px);height:58px;border-top:1px solid #AEBBB6;position:relative}
.yt-trow div{position:relative}
.yt-trow i{position:absolute;left:14%;right:14%;top:0;background:rgba(242,84,45,.28);border-radius:0 0 4px 4px;transition:height .55s var(--ease)}
.yt-trow div.even i{background:none}
.yt-trow div.even::after{content:"Even";position:absolute;left:50%;top:8px;transform:translateX(-50%);font-size:.7rem;font-weight:600;color:var(--ink);background:var(--paper);padding:2px 6px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--ink);white-space:nowrap}
.yt.pre .yt-trow i{height:0!important}

.yt-say{margin-top:28px;font:400 clamp(1.2rem,2.1vw,1.6rem)/1.45 var(--sans);letter-spacing:-.01em;max-width:58ch}
.yt-say b{font-weight:600;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:2px;text-underline-offset:5px}
.yt-if{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);font-size:.95rem;color:var(--mute)}
.yt-if strong{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.yt-if .arrow{color:var(--orange);font-weight:600}
.yt-foot{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;justify-content:space-between;margin-top:24px}
.yt-foot .chip{max-width:46ch}

.yt-table{margin-top:4px}
.yt-table table{width:100%;border-collapse:collapse;font-size:.88rem;font-variant-numeric:tabular-nums}
.yt-table th{text-align:left;font-weight:500;color:var(--mute);font-size:.78rem;padding:6px 8px;border-bottom:1px solid var(--rule)}
.yt-table td{padding:4px 8px;border-bottom:1px solid var(--rule)}
.yt-table td:first-child{font-weight:600;width:60px}
.yt-table input{width:100%;min-width:0;border:1px solid var(--rule);border-radius:8px;padding:.45em .6em;background:var(--salt);text-align:right}
.yt-table td.res{text-align:right;white-space:nowrap}
.yt-table td.res.red{color:var(--ink);font-weight:600}
.yt-table td.res.red::before{content:"";display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--orange);margin-right:6px}
.yt-table .hint{font-size:.8rem;color:var(--mute);margin-bottom:10px}

@media (max-width:760px){
  .yt-fields{grid-template-columns:1fr 1fr}
  .yt-plotwrap{padding-left:36px}
  .yt-grid span{font-size:.62rem}
  .yt-months{font-size:.62rem}
  .yt-table td,.yt-table th{padding:4px 4px}
}
.yt-top .chip{border-radius:12px}
@media (max-width:560px){
  .yt-tabs{display:flex;flex-wrap:nowrap;width:100%}
  .yt-tabs button{flex:1;padding:.7em .4em;font-size:.8rem;white-space:nowrap}
}
@media (max-width:460px){
  .yt-fields{grid-template-columns:1fr}
}
.still .yt-in,.still .yt-gap,.still .yt-bill,.still .yt-trow i{transition:none}

/* the toast's link, and what arrives on the contact page */
.atc-toast .go{display:inline-block;margin-top:10px;color:#fff;font-weight:600;text-decoration:none;border-bottom:1px solid var(--orange)}
.attached{border-radius:14px;padding:14px 16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule);font-size:.92rem}
.attached p{display:flex;justify-content:space-between;align-items:center;gap:12px}
.attached b::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px;vertical-align:1px}
.attached button{border:0;background:none;cursor:pointer;color:var(--mute);text-decoration:underline;min-height:40px;padding:0 4px}
.attached ul{margin:6px 0 0;padding-left:18px;color:var(--mute)}
.attached[hidden]{display:none}

/* BIR Registration Seal: footer of every page, and the About page's business card */
.ft-bir{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.ft-bir a{display:inline-block;background:#fff;border-radius:10px;padding:8px 10px;line-height:0}
.ft-bir img{width:300px;max-width:100%;height:auto}
.ft-bir p{font-size:.8rem;color:var(--mist);max-width:40ch}
.reg-bir{display:block;margin-top:18px;border-radius:12px;padding:10px;box-shadow:inset 0 0 0 1px var(--rule);background:#fff;line-height:0}
.reg-bir img{width:100%;max-width:420px;height:auto;margin-inline:auto}

/* badge zoom */
.zoom{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(6,10,20,.78);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);cursor:zoom-out}
.zoom[hidden]{display:none}
.zoom figure{margin:0;background:#fff;border-radius:16px;padding:18px;max-width:min(980px,100%);cursor:default;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.zoom img{width:100%;height:auto;display:block}
.zoom figcaption{margin-top:10px;font-size:.88rem;color:var(--mute);text-align:center}
.zoom button{position:fixed;top:16px;right:16px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:var(--ink);font-size:1.4rem;cursor:pointer}
html.zoomed{overflow:hidden}

/* Calendly booking calendar on the contact page */
.cal-live .calendly-inline-widget{min-width:280px;height:960px;margin-top:12px;border-radius:12px;overflow:hidden;background:#fff}
@media (max-width:760px){.cal-live .calendly-inline-widget{height:1000px}}

/* founder photo */
.portrait.has-photo{border:0;background:none;overflow:hidden;display:block}
.portrait.has-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* founding clients: one card, no counting */
.hm-slots.one{grid-template-columns:minmax(0,300px);justify-content:end}
.svw-slots.one{grid-template-columns:minmax(0,240px);justify-content:end}
@media (max-width:760px){.hm-slots.one{justify-content:start;grid-template-columns:minmax(0,220px)}}
