/* Twinge phone demo. Everything is scoped under .twd so it can sit inside asktwinge.com without clashing.
   No external assets. Fonts: uses the site's 'DM Sans' and Fraunces when present, system fallbacks otherwise. */
.twd{--navy:#1F3A5F;--ink:#1F2A3A;--slate:#4A5568;--cream:#FFF8EE;--glow:#FFC45C;--line:#E9D3AE;--amberdk:#8A5A12;--tw:#FFF1D6;--twline:#F2DDB2;
 --pw:min(300px,calc(100cqw - 24px));--ph:calc(var(--pw)*2.07);
 container-type:inline-size;container-name:twd;position:relative;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--ink);line-height:1.5;text-align:left}
.twd *,.twd *::before,.twd *::after{box-sizing:border-box;margin:0;padding:0}
.twd-defs{position:absolute;width:0;height:0;overflow:hidden}
.twd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- layout ---------- */
.twd-in{display:grid;gap:18px;justify-items:center}
.twd-nav{width:100%;max-width:440px}
.twd-view{display:flex;flex-direction:column;align-items:center;width:100%}
.twd-eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--amberdk)}
.twd-title{font-family:Fraunces,Georgia,serif;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-size:26px;color:var(--ink);text-wrap:balance;margin:4px 0 14px}
.twd-steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.twd .twd-step{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:52px;height:100%;padding:8px 10px;border-radius:14px;border:1.5px solid var(--line);
 background:rgba(255,255,255,.72);color:var(--ink);font:inherit;font-size:16px;font-weight:700;line-height:1.2;text-align:left;cursor:pointer;overflow:hidden;box-shadow:none;transition:background-color .25s,border-color .25s,color .25s}
.twd .twd-step:hover{background:#fff;border-color:#D9C7A8}
.twd .twd-step[aria-current="step"]{background:var(--navy);border-color:var(--navy);color:var(--cream)}
.twd-step-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--cream);display:grid;place-items:center;font-size:15px;font-weight:700;transition:background-color .25s,color .25s}
.twd-step[aria-current="step"] .twd-step-num{background:var(--glow);color:var(--ink)}
.twd-step-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.twd-step-desc{display:none;font-weight:400;font-size:16px;color:var(--slate);line-height:1.35}
.twd-step[aria-current="step"] .twd-step-desc{color:rgba(255,248,238,.88)}
.twd-step-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--glow);transform-origin:left center;transform:scaleX(var(--p,0));opacity:0}
.twd-step[aria-current="step"] .twd-step-bar{opacity:1}
.twd .twd-toggle{display:inline-flex;align-items:center;gap:8px;margin-top:12px;min-height:44px;padding:8px 18px 8px 14px;border-radius:999px;border:1.5px solid var(--navy);
 background:#fff;color:var(--navy);font:inherit;font-size:16px;font-weight:700;line-height:1.2;cursor:pointer;box-shadow:none}
.twd .twd-toggle:hover{background:#F3EBDD}
.twd-toggle svg{width:18px;height:18px;fill:currentColor;flex:none}
.twd.is-paused .twd-ico-pause,.twd:not(.is-paused) .twd-ico-play{display:none}
.twd button:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.twd .twd-step[aria-current="step"]:focus-visible{outline-color:var(--glow)}
.twd-note{position:relative;min-height:24px;width:min(100%,340px);margin-top:12px;text-align:center;font-size:16px;font-weight:700;color:var(--navy);line-height:1.35}
.twd-note>span{display:block}
.twd-js .twd-note>span{position:absolute;left:0;right:0;top:0;transition:opacity .4s}
.twd-js .twd-note>span:not(.on){opacity:0}
.twd-cap{text-align:center;font-size:16px;color:var(--slate);margin-top:10px}
.twd-js .twd-note{min-height:46px}

@container twd (min-width:760px){
 .twd-in{grid-template-columns:minmax(0,1fr) auto;column-gap:64px;align-items:center;justify-items:stretch;--pw:330px}
 .twd-nav{max-width:470px}
 .twd-title{font-size:40px;margin:6px 0 22px}
 .twd-steps{grid-template-columns:1fr;gap:10px}
 .twd .twd-step{padding:12px 16px;gap:14px;align-items:flex-start}
 .twd-step-num{margin-top:1px}
 .twd-step-name{font-size:18px}
 .twd-step-desc{display:block}
 .twd-step-alt{margin-top:10px;padding-top:14px;border-top:1.5px dashed var(--line)}
 .twd .twd-toggle{margin-top:18px}
}

/* ---------- stage + phones ---------- */
.twd-stage{display:flex;flex-direction:column;align-items:center}
.twd-owner{position:relative;height:30px;width:var(--pw);margin-bottom:12px}
.twd-owner-tag{position:absolute;left:50%;top:0;transform:translateX(-50%);white-space:nowrap;font-size:16px;font-weight:700;color:var(--navy);background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:2px 14px;transition:opacity .45s}
.twd-owner-tag em{font-style:normal;font-weight:400;color:var(--slate)}
.twd-js .twd-owner-tag:not(.on){opacity:0}
.twd:not(.twd-js) .twd-owner--kid{display:none}
.twd-phones{position:relative;width:var(--pw);height:var(--ph);perspective:1400px}
.twd-phone{position:absolute;inset:0;border-radius:calc(var(--pw)*.16);padding:9px;background:linear-gradient(145deg,#2C3546,#121822);
 box-shadow:inset 0 0 0 1.5px #3D475A,0 34px 60px -30px rgba(31,42,58,.6),0 14px 26px -18px rgba(31,42,58,.45);transition:opacity .55s ease,transform .75s cubic-bezier(.2,.8,.2,1),visibility 0s}
.twd-phone::before,.twd-phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#2C3546}
.twd-phone::before{left:-3px;top:22%;height:56px}
.twd-phone::after{right:-3px;top:27%;height:78px}
.twd-js .twd-phone--mom:not(.on){opacity:0;visibility:hidden;transform:translateX(-16%) rotateY(16deg) scale(.92);transition:opacity .5s ease,transform .75s cubic-bezier(.2,.8,.2,1),visibility 0s .75s}
.twd-js .twd-phone--kid:not(.on){opacity:0;visibility:hidden;transform:translateX(16%) rotateY(-16deg) scale(.92);transition:opacity .5s ease,transform .75s cubic-bezier(.2,.8,.2,1),visibility 0s .75s}
.twd:not(.twd-js) .twd-phone--kid{display:none}
.twd-screen{position:relative;height:100%;border-radius:calc(var(--pw)*.16 - 9px);overflow:hidden;background:#FBF6EE;isolation:isolate}
.twd-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:86px;height:25px;border-radius:20px;background:#0A0E15;z-index:30}
.twd-status{position:absolute;top:0;left:0;right:0;height:44px;display:flex;justify-content:space-between;align-items:center;padding:3px 24px 0 30px;font-size:14px;font-weight:700;z-index:20;color:var(--ink);transition:color .3s}
.twd-status-time{position:relative;min-width:40px;display:block;height:20px}
.twd-status-time>span{position:absolute;left:0;top:0}
.twd-js .twd-status-time>span:not(.on){opacity:0}
.twd-status-icons{display:flex;gap:6px;align-items:center}
.twd-status-icons svg{height:11px;width:auto;fill:currentColor;color:currentColor}
.twd-screen--lock .twd-status{color:#fff}
.twd-screen--lock .twd-status.hl{color:var(--ink)}
.twd-homebar{position:absolute;left:50%;bottom:7px;width:108px;height:5px;margin-left:-54px;border-radius:3px;background:rgba(31,42,58,.4);z-index:25}
.twd-screen--lock .twd-homebar{background:rgba(255,255,255,.75)}

/* ---------- messaging app (original UI) ---------- */
.twd-app{position:absolute;inset:0;display:flex;flex-direction:column;background:#FBF6EE;padding-top:44px;z-index:5;transition:transform .55s cubic-bezier(.3,.7,.2,1),opacity .45s}
.twd-js .twd-app--unknown:not(.on){transform:translateX(-30%);opacity:0}
.twd-js .twd-app--twinge:not(.on),.twd-js .twd-app--intro:not(.on){transform:translateX(102%)}
.twd-js .twd-app--invite:not(.on),.twd-js .twd-app--setup:not(.on){transform:translateY(8%);opacity:0;visibility:hidden;transition:transform .5s,opacity .4s,visibility 0s .5s}
.twd:not(.twd-js) .twd-app--unknown,.twd:not(.twd-js) .twd-app--intro{display:none}
.twd-app--twinge,.twd-app--intro{box-shadow:-14px 0 26px -14px rgba(0,0,0,.2)}
.twd-head{display:flex;align-items:center;gap:10px;padding:6px 14px 10px;border-bottom:1px solid #EFE2CB;background:rgba(255,255,255,.75)}
.twd-back{flex:none;width:11px;height:11px;margin:0 2px 0 4px;border-left:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg)}
.twd-ava{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;font-size:16px;color:#fff}
.twd-ava--unknown{background:#8C96A6}
.twd-ava--s{background:#6E4F8F}.twd-ava--c{background:#2C6E61}
.twd-ava--glow{box-shadow:0 0 0 3px rgba(255,196,92,.5)}
.twd-head-text{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.twd-head-text b{font-size:16px;color:var(--ink)}
.twd-head-text span{font-size:13px;color:#5A6577}
.twd-thread{flex:1;min-height:0;padding:12px 12px 10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.twd-thread--chat{justify-content:flex-end;gap:0}
.twd-day{text-align:center;font-size:13px;color:#5A6577;font-weight:600;padding-bottom:6px}
.twd-thread--chat .twd-day{margin-bottom:0}
.twd-msg{display:grid;grid-template-rows:1fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.twd-msg>*{min-height:0;margin-top:8px}
.twd-js .twd-msg:not(.on){grid-template-rows:0fr}
.twd-js .twd-msg:not(.on)>*{overflow:hidden;margin-top:0}
.twd:not(.twd-js) .twd-msg[data-show^="2.1"],.twd:not(.twd-js) .twd-msg[data-show^="2.9"],.twd:not(.twd-js) .twd-msg[data-show^="2.3-"],.twd:not(.twd-js) .twd-msg[data-show^="1.10"]{display:none}
.twd-msg{display:flex;flex-direction:column}
.twd-js .twd-msg{display:grid}
.twd-bub{max-width:86%;padding:9px 12px;border-radius:18px;font-size:16px;line-height:1.36;overflow-wrap:anywhere;position:relative;transition:opacity .35s,transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.twd-js .twd-bub[data-show]:not(.on),.twd-js .twd-msg:not(.on) .twd-bub{opacity:0;transform:translateY(10px) scale(.96)}
.twd-bub--in{align-self:flex-start;background:#fff;border:1px solid #E3D8C6;border-bottom-left-radius:6px;transform-origin:left top}
.twd-bub--in.hl{transform:scale(1.035);box-shadow:0 16px 32px -12px rgba(0,0,0,.4)}
.twd-bub--out{align-self:flex-end;background:var(--navy);color:var(--cream);border-bottom-right-radius:6px;transform-origin:right bottom}
.twd-bub--out small{display:block;font-size:13px;opacity:.82;margin-bottom:2px}
.twd-bub--tw{align-self:flex-start;background:var(--tw);border:1px solid var(--twline);border-bottom-left-radius:6px;transform-origin:left top}
.twd-bub--tw strong{color:#9B2C2C}
.twd-late{transition-delay:.9s}
.twd-url{text-decoration:none}
.twd-link-text{text-decoration:underline;text-underline-offset:2px;color:var(--navy);font-weight:700}
.twd-receipt{align-self:flex-end;font-size:13px;color:#5A6577;margin-top:3px!important}
.twd-msg>.twd-receipt{justify-self:end}
.twd-typing{justify-self:start;display:flex;gap:5px;width:max-content;padding:12px 14px;border-radius:18px;background:var(--tw);border:1px solid var(--twline)}
.twd-typing i{width:8px;height:8px;border-radius:50%;background:#B7791F;animation:twd-dot 1.1s infinite ease-in-out}
.twd-typing i:nth-child(2){animation-delay:.15s}.twd-typing i:nth-child(3){animation-delay:.3s}
@keyframes twd-dot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
.twd-chips{display:flex;gap:8px;justify-self:start}
.twd-chip{position:relative;font-size:16px;font-weight:700;color:var(--navy);background:#fff;border:1.5px solid var(--navy);border-radius:999px;padding:5px 16px;transition:background-color .2s,color .2s}
.twd-chip.hl{background:var(--navy);color:var(--cream)}
.twd-compose{display:flex;gap:8px;align-items:center;padding:8px 10px 22px;border-top:1px solid #EFE2CB;background:#fff}
.twd-field{flex:1;min-width:0;position:relative;height:38px;border:1px solid #DCD2C2;border-radius:20px;font-size:16px;color:#6B7280;overflow:hidden}
.twd-field>span{position:absolute;left:14px;right:8px;top:50%;transform:translateY(-50%);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.twd-typed{color:var(--ink)}
.twd-js .twd-field>span[data-show]:not(.on){opacity:0}
.twd:not(.twd-js) .twd-typed{display:none}
.twd-send{flex:none;position:relative;width:36px;height:36px;border-radius:50%;background:#C3CAD5;transition:background-color .2s}
.twd-send.hl,.twd-app--twinge .twd-send.hl{background:var(--navy)}
.twd-send::after{content:"";position:absolute;left:50%;top:55%;width:10px;height:10px;margin:-5px 0 0 -5px;border-left:2.5px solid #fff;border-top:2.5px solid #fff;transform:rotate(45deg)}
.twd-row{position:relative;z-index:3;display:flex;flex-direction:column;margin-top:4px}
.twd-dim{position:absolute;inset:0;z-index:2;background:rgba(18,26,38,.42);transition:opacity .3s}
.twd-js .twd-dim:not(.on){opacity:0}
.twd:not(.twd-js) .twd-dim{display:none}
.twd-menu{position:absolute;top:calc(100% + 10px);left:0;width:190px;background:#fff;border-radius:16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);z-index:4;transform-origin:top left;transition:opacity .25s,transform .3s cubic-bezier(.2,.8,.2,1)}
.twd-js .twd-menu:not(.on){opacity:0;transform:scale(.85)}
.twd:not(.twd-js) .twd-menu{display:none}
.twd-menu-item{position:relative;display:flex;align-items:center;gap:10px;padding:9px 14px;font-size:16px;color:var(--ink);border-top:1px solid #F0E7D8;transition:background-color .2s}
.twd-menu-item:first-child{border-top:0;border-radius:16px 16px 0 0}.twd-menu-item:last-child{border-radius:0 0 16px 16px}
.twd-menu-item svg{width:18px;height:18px;flex:none}
.twd-menu-fwd.hl{background:var(--tw);color:var(--navy);font-weight:700}
.twd-menu-del{color:#B42318}
/* forward sheet */
.twd-sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:#FFFDF9;border-radius:22px 22px 0 0;padding:8px 14px 24px;box-shadow:0 -12px 30px -10px rgba(0,0,0,.3);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.twd-js .twd-sheet:not(.on){transform:translateY(105%)}
.twd:not(.twd-js) .twd-sheet{display:none}
.twd-grab{display:block;width:40px;height:5px;border-radius:3px;background:#D8CDBB;margin:0 auto 8px}
.twd-sheet-title{text-align:center;font-weight:700;font-size:17px}
.twd-search{display:block;background:#F1EADF;border-radius:12px;padding:7px 12px;font-size:16px;color:#5F6875;margin:8px 0 4px}
.twd-contact{position:relative;display:flex;align-items:center;gap:12px;padding:7px 8px;border-radius:12px;transition:background-color .2s}
.twd-contact.hl{background:var(--tw)}
.twd-contact-text{display:flex;flex-direction:column;line-height:1.2}
.twd-contact-text b{font-size:16px}.twd-contact-text span{font-size:13px;color:#5A6577}
.twd-check{margin-left:auto;width:22px;height:22px;border-radius:50%;border:2px solid #B9C1CC;position:relative;transition:background-color .2s,border-color .2s}
.twd-contact.hl .twd-check{background:var(--navy);border-color:var(--navy)}
.twd-contact.hl .twd-check::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;border-right:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(45deg)}
.twd-sheet-send{position:relative;display:block;margin-top:10px;text-align:center;padding:11px;border-radius:999px;background:#B9C1CC;color:#fff;font-weight:700;font-size:16px;transition:background-color .25s}
.twd-sheet-send.hl{background:var(--navy)}

/* touch indicator */
.twd-touch{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:rgba(31,58,95,.3);border:2.5px solid rgba(255,255,255,.95);
 box-shadow:0 0 0 1px rgba(31,58,95,.35),0 4px 12px rgba(0,0,0,.25);pointer-events:none;z-index:10;transition:opacity .2s,transform .25s}
.twd-touch:not(.on){opacity:0;transform:scale(1.4)}
.twd-touch.on{animation:twd-tap .55s .15s both}
@keyframes twd-tap{0%{transform:scale(1)}40%{transform:scale(.78)}100%{transform:scale(1)}}
.twd-touch--hold.on{animation:none}
.twd-touch--hold::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:3px solid var(--glow)}
.twd-touch--hold.on::after{animation:twd-hold .8s both}
@keyframes twd-hold{from{transform:scale(.55);opacity:0}to{transform:scale(1);opacity:1}}

/* ---------- lock screen ---------- */
.twd-screen--lock{color:#fff;background:radial-gradient(120% 55% at 85% 0%,rgba(255,196,92,.55),transparent 62%),radial-gradient(90% 45% at 0% 100%,rgba(255,196,92,.28),transparent 62%),linear-gradient(172deg,#2D4F7C 0%,#1F3A5F 45%,#152842 100%)}
.twd-clock{position:relative;text-align:center;margin-top:50px;height:100px}
.twd-clock-v{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;transition:opacity .6s}
.twd-js .twd-clock-v:not(.on){opacity:0}
.twd-date{font-size:16px;font-weight:600;opacity:.95}
.twd-time{font-size:66px;font-weight:600;line-height:1;letter-spacing:-.02em}
.twd-notes{position:relative}
.twd-notif,.twd-digest{position:absolute;left:10px;right:10px;top:10px;background:rgba(255,250,242,.97);color:var(--ink);border-radius:22px;padding:11px 13px 12px;
 box-shadow:0 14px 32px -12px rgba(0,0,0,.5);transition:opacity .4s,transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.twd-js .twd-notif:not(.on),.twd-js .twd-digest:not(.on){opacity:0;transform:translateY(-26px) scale(.96)}
.twd:not(.twd-js) .twd-notif,.twd:not(.twd-js) .twd-digest{position:relative;margin-top:10px;left:auto;right:auto;top:auto}
.twd-notif-head{display:flex;align-items:center;gap:8px}
.twd-notif-head .twd-ava{width:26px;height:26px}
.twd-notif-head b{font-size:16px;flex:1;min-width:0;line-height:1.2}
.twd-notif-time{font-size:13px;color:#5A6577}
.twd-notif-body{font-size:16px;line-height:1.36;margin-top:5px}
.twd-notif-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
.twd-notif-more>div{overflow:hidden;min-height:0}
.twd-notif.hl .twd-notif-more,.twd:not(.twd-js) .twd-notif-more{grid-template-rows:1fr}
.twd-notif.hl{box-shadow:0 22px 44px -14px rgba(0,0,0,.6)}
.twd-detail{margin-top:9px;border-top:1px solid #EADBC2}
.twd-detail>div{padding:6px 0;border-bottom:1px solid #F1E6D3}
.twd-detail>div:last-child{border-bottom:0;padding-bottom:0}
.twd-detail dt{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amberdk);line-height:1.3}
.twd-detail dd{font-size:16px;line-height:1.32}
.twd-verdict{display:inline-block;background:#9B2C2C;color:#fff;font-weight:700;font-size:14px;line-height:1.4;border-radius:999px;padding:0 9px;margin-right:4px;vertical-align:1px}
/* digest */
.twd-example{position:absolute;top:-10px;right:14px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--ink);color:var(--cream);border-radius:7px;padding:2px 8px;line-height:1.4;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.twd-tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}
.twd-tile{background:#fff;border:1px solid #EADBC2;border-radius:14px;padding:7px 10px 8px;display:flex;flex-direction:column;line-height:1.15;transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1)}
.twd-tile--wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px}
.twd-num{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:30px;color:var(--navy);line-height:1.05;font-variant-numeric:tabular-nums;white-space:nowrap}
.twd-tile-label{font-size:16px;color:#384152;line-height:1.2}
.twd-js .twd-digest:not(.on) .twd-tile{opacity:0;transform:translateY(8px)}
.twd-digest.on .twd-tile:nth-child(1){transition-delay:.3s}.twd-digest.on .twd-tile:nth-child(2){transition-delay:.45s}.twd-digest.on .twd-tile:nth-child(3){transition-delay:.6s}
.twd-top{margin-top:8px;font-size:16px;line-height:1.3}
.twd-top span,.twd-web-list+.twd-web-note span{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--amberdk);margin-right:6px}
.twd-proud{margin-top:8px;background:var(--tw);border:1px solid var(--twline);border-radius:14px;padding:7px 10px;font-size:16px;line-height:1.32;transition:opacity .45s,transform .45s,box-shadow .6s}
.twd-proud b{color:var(--navy)}
.twd-js .twd-proud:not(.on){opacity:0;transform:translateY(6px)}
.twd-proud.on{box-shadow:0 0 0 3px rgba(255,196,92,.55)}

/* ---------- invite: link card + web onboarding ---------- */
.twd-card{justify-self:start;position:relative;width:86%;border-radius:16px;overflow:visible;background:#fff;border:1px solid #E3D8C6;transition:opacity .35s,transform .45s}
.twd-js .twd-msg:not(.on) .twd-card{opacity:0;transform:translateY(10px)}
.twd-card-art{display:flex;align-items:center;justify-content:center;gap:8px;height:62px;border-radius:15px 15px 0 0;background:radial-gradient(ellipse at 90% 0%,rgba(255,196,92,.55),transparent 60%),var(--cream);border-bottom:1px solid #EFE2CB}
.twd-card-art .twd-ava{width:34px;height:34px}
.twd-card-word{font-family:Fraunces,Georgia,serif;font-weight:700;font-size:24px;color:var(--navy);letter-spacing:-.02em}
.twd-card-text{display:flex;flex-direction:column;padding:7px 12px 9px;line-height:1.25}
.twd-card-text b{font-size:16px}.twd-card-text span{font-size:14px;color:#5A6577}
.twd-web{position:absolute;inset:0;z-index:8;background:var(--cream);color:var(--ink);padding-top:44px;display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.twd-js .twd-web:not(.on){transform:translateY(102%)}
.twd:not(.twd-js) .twd-web{display:none}
.twd-web-bar{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 14px 0;padding:6px 10px;border-radius:12px;background:#EFE6D7;font-size:15px;font-weight:600;color:var(--ink)}
.twd-web-bar svg{width:11px;height:13px;fill:currentColor;color:#3E4757}
.twd-web-body{flex:1;padding:16px 18px 24px;background:radial-gradient(ellipse at 95% 0%,rgba(255,196,92,.35),transparent 55%)}
.twd-web-brand{display:flex;align-items:center;gap:8px;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:22px;color:var(--navy)}
.twd-web-brand .twd-ava{width:30px;height:30px}
.twd-web-title{margin-top:14px;font-family:Fraunces,Georgia,serif;font-weight:700;font-size:26px;line-height:1.1;letter-spacing:-.02em}
.twd-web-lede{margin-top:6px;font-size:16px;color:var(--slate)}
.twd-web-list{list-style:none;margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:16px}
.twd-web-list li{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:16px;line-height:1.3;border-top:1px solid #F1E6D3}
.twd-web-list li:first-child{border-top:0}
.twd-switch{flex:none;margin-left:auto;position:relative;width:42px;height:26px;border-radius:13px;background:#2C6E61}
.twd-switch::after{content:"";position:absolute;right:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff}
.twd-web-note{margin-top:12px;font-size:16px;color:var(--slate)}
.twd-web-btn{position:relative;display:block;margin-top:14px;text-align:center;padding:12px;border-radius:999px;background:var(--navy);color:var(--cream);font-weight:700;font-size:17px;transition:background-color .3s .3s}
.twd-web-btn-b{display:none}
.twd-web-btn.hl{background:#2C6E61}
.twd-web-btn.hl .twd-web-btn-a{display:none}.twd-web-btn.hl .twd-web-btn-b{display:inline}

/* ---------- states ---------- */
.twd-noanim *{transition:none!important}
.twd.is-paused *,.twd.is-paused *::after{animation-play-state:paused!important}
/* reduced motion / static frames */
.twd.is-static .twd-steps,.twd.is-static .twd-toggle,.twd.is-static .twd-stage,.twd.is-static .twd-view>.twd-note{display:none}
.twd.is-static .twd-in{grid-template-columns:minmax(0,1fr);justify-items:center}
.twd.is-static .twd-nav{max-width:none;text-align:center}
.twd-frames{display:grid;gap:30px 24px;width:100%;justify-items:center;grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(var(--pw) + 16px)),1fr))}
.twd-frame{display:flex;flex-direction:column;align-items:center;gap:8px}
.twd-frame-label{font-weight:700;font-size:18px;color:var(--navy);text-align:center}
.twd-frame-sub{font-size:16px;color:var(--slate);margin-top:-6px;text-align:center;max-width:var(--pw)}
.twd-frame .twd-phones{perspective:none}
.twd-frame .twd-phone{transform:none!important}
@media (prefers-reduced-motion:reduce){.twd *,.twd *::before,.twd *::after{transition:none!important;animation:none!important}}
.twd-msg>.twd-bub--out{justify-self:end}
.twd-msg>.twd-bub--tw,.twd-msg>.twd-bub--in{justify-self:start}

/* collapsed messages: drop vertical padding/border too, so 0fr really is 0 */
.twd-msg>*{transition:padding .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),margin .45s cubic-bezier(.2,.8,.2,1)}
.twd-js .twd-msg:not(.on)>*{padding-top:0!important;padding-bottom:0!important;border-top-width:0;border-bottom-width:0;opacity:0}
.twd-app{color:var(--ink)}

/* automated link check before the human answer (example data) */
.twd-lc{align-self:stretch;margin-right:8%;padding:10px 12px;border-radius:16px;background:#fff;border:1px solid #E3D8C6;color:var(--ink);font-size:16px;line-height:1.3}
.twd-lc-head{display:flex;align-items:center;gap:7px;font-weight:700;color:var(--navy)}
.twd-lc-dot{width:9px;height:9px;border-radius:50%;background:var(--glow);box-shadow:0 0 0 3px rgba(255,196,92,.3);animation:twd-pulse 1.1s ease-in-out infinite}
@keyframes twd-pulse{50%{transform:scale(.6);opacity:.6}}
.twd-lc-tag{margin-left:auto;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--amberdk);background:#FFF1D6;border-radius:6px;padding:1px 6px}
.twd-lc-list{list-style:none;margin:6px 0 0;padding:0}
.twd-lc-list li{display:flex;gap:7px;padding:2px 0;color:var(--ink)}
.twd-lc-ok{color:#2C6E61;font-weight:800}
.twd-lc-human{display:flex;align-items:center;gap:7px;margin-top:7px;padding-top:7px;border-top:1px dashed #E3D8C6;font-weight:600;color:var(--navy)}
.twd-lc-person{width:16px;height:16px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 36%,var(--navy) 0 26%,transparent 27%),radial-gradient(ellipse at 50% 100%,var(--navy) 0 42%,transparent 43%),#FFE2A8}
.twd-lc li,.twd-lc-human{transition:opacity .35s ease,transform .35s ease}
.twd-js .twd-msg:not(.on) .twd-lc li,.twd-js .twd-msg:not(.on) .twd-lc-human{opacity:0;transform:translateY(4px);transition-delay:0s!important}
.twd-lc li:nth-child(1){transition-delay:.6s}.twd-lc li:nth-child(2){transition-delay:1.2s}
.twd-lc li:nth-child(3){transition-delay:1.8s}.twd-lc li:nth-child(4){transition-delay:2.4s}
.twd-lc-human{transition-delay:3.1s}
.twd-msg--wait.on,.twd-msg--wait.on>*{transition-delay:3.5s}
.twd-sig{display:block;margin-top:5px;font-weight:600;color:var(--slate)}
.twd-is-paused .twd-lc-dot,.is-paused .twd-lc-dot{animation-play-state:paused}

/* child path on Mom's phone: Sarah's own text, then Mom opts in by texting Twinge */
.twd-js .twd-app--fromkid:not(.on){opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.twd:not(.twd-js) .twd-app--fromkid{display:none}
.twd-msg.on .twd-late2,.twd-msg.on>.twd-late2{transition-delay:1.6s}
.twd-msg.on>.twd-late{transition-delay:.9s}
.twd-lc-tag{white-space:nowrap}
.twd-frame .twd-phones+.twd-phones{margin-top:18px}
.twd-frames .twd-touch{display:none!important}
.twd:not(.twd-js) .twd-msg--wait{display:none}