/* Additions for the live Tikle app, on top of the prototype styles in proto.css */
html{color-scheme:only light}
.vlink{text-decoration:none}
a.btn,a.tab,a.chip,a.gopro,a.ai-card,a.retlock,a.direct-cta,a.plan-pill,a.u-cta,a.x,a.u-x,a.tk-th{text-decoration:none;color:inherit}
a.btn-blue,a.btn-dark{color:#fff}
a.tab{display:inline-flex;align-items:center}
a.chip{display:inline-flex;align-items:center}
a.x,a.u-x{display:inline-flex;align-items:center;justify-content:center}
a.scrim{display:block}
.inline{display:inline}
.flash{padding:12px 16px;border-radius:12px;margin:18px 0;font-weight:500}
.flash.ok{background:var(--green-bg);color:var(--green)}
.flash.err{background:#FDE3E3;color:#8A1F1F}
.flash.info{background:var(--blue-bg);color:var(--blue-dk)}
.devbox{background:#FFF6D6;border:1px dashed #C9A227;color:#5C4500;border-radius:12px;padding:12px 14px;font-size:14px}
.devbox a{color:#5C4500;font-weight:700}
.bm-wrap[hidden]{display:none}
.bm-wrap .dmodal{z-index:52}
.rate-edit{margin-top:10px}
.inline-d{display:inline-block;position:relative}
.inline-d > summary{list-style:none;cursor:pointer}
.inline-d > summary::-webkit-details-marker{display:none}
.inline-d[open] > form{position:absolute;right:0;top:calc(100% + 6px);z-index:5;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.12);display:flex;flex-wrap:wrap;gap:8px;align-items:center;width:280px}
.inline-d[open] > form input{width:90px;height:40px;border:1px solid var(--line2);border-radius:8px;padding:0 8px}
.msgline{margin-top:8px;padding:8px 10px;background:#F4F1FE;border-radius:10px}
.msgreply{display:flex;gap:6px;margin-top:6px}.msgreply input{flex:1;min-width:0;height:36px;border:1px solid var(--line2);border-radius:8px;padding:0 8px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:14px}.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:600}
.files{display:flex;flex-direction:column;gap:8px}
.fileitem{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 24px}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px}.stat b{display:block;font:700 26px 'Space Grotesk',sans-serif}
.admin-nav{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.admin-nav a{padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line2);text-decoration:none;color:var(--ink);font-weight:600;font-size:14px}
.admin-nav a[aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
.field input,.field select,.field textarea,.in{height:46px;border:1px solid var(--line2);border-radius:10px;padding:0 12px;font-weight:400;background:#fff;width:100%}
.field textarea{height:auto;min-height:100px;padding:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;cursor:pointer}
.legal{max-width:760px}.legal h2{font:600 20px 'Space Grotesk',sans-serif;margin:28px 0 8px}
main.wrap{padding-bottom:60px}
main.wrap{padding-top:28px}
.tk-card[hidden],[hidden]{display:none!important}

.bv-th{border:none;padding:0;cursor:pointer;background:none}
.player-wrap .player{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:53;width:min(360px,92vw);display:flex;flex-direction:column;align-items:center;gap:10px}
.player iframe{width:100%;aspect-ratio:9/16;max-height:80vh;border:0;border-radius:16px;background:#000}
.player .x{position:absolute;right:-8px;top:-52px;background:#fff}
.player a{color:#fff}
/* gold "Sign up to Tikle Pro" buttons rendered as links: centre the text and fill evenly */
a.u-cta,a.outpro-btn{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;color:#2B1F04!important;padding:0 18px}
.outpro-cta{background-size:100% 100%!important}
a.outpro-btn{min-height:48px;border-radius:12px}
.reachpro{flex-direction:row;align-items:center;gap:20px;margin-bottom:18px;padding:18px 20px}
.reachpro-txt{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.reachpro-cta{flex:0 0 260px;display:flex;flex-direction:column;gap:6px}
.reachpro .outpro-cta{margin-top:0}
@media (max-width:760px){.reachpro{flex-direction:column;align-items:stretch}.reachpro-cta{flex-basis:auto}}
.outpro-x{background:radial-gradient(120% 90% at 100% 0,rgba(246,217,133,.18),transparent 55%),var(--ink2);border:1px solid rgba(246,217,133,.35);box-shadow:0 14px 34px rgba(23,21,31,.28)}
.op-score{display:grid;grid-template-columns:1fr auto 1.25fr;align-items:stretch;gap:8px;margin:4px 0 2px}
.op-cell{border-radius:12px;padding:10px 12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.op-n{font:700 30px/1 'Space Grotesk',sans-serif;letter-spacing:-.03em;color:#fff}
.op-l{font-size:11.5px;line-height:1.3;color:#B9B4C4;margin-top:4px}
.op-arrow{display:flex;align-items:center;color:#F6D985}
.op-gold{background:linear-gradient(135deg,rgba(246,217,133,.22),rgba(201,150,46,.12));border-color:rgba(246,217,133,.55)}
.op-gold .op-n{color:#F6D985;font-size:34px}
.op-gold .op-l{color:#E9E2CC}
.op-chips{display:flex;flex-wrap:wrap;gap:6px}
.op-chip{font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);color:#EDEAF3;border:1px solid rgba(255,255,255,.12)}
.op-more{color:#F6D985;border-color:rgba(246,217,133,.45);background:transparent}
.drop-txt{display:flex;flex-direction:column;gap:4px;align-items:center}
.drop-txt[hidden]{display:none}
.drop-pick{display:flex;align-items:center;gap:14px;width:100%;text-align:left}
.drop-pick video{width:56px;height:100px;object-fit:cover;border-radius:8px;background:#000;flex:none;pointer-events:none}
.drop-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.drop-info .strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
form input,form select,form textarea,form .drop{scroll-margin-top:96px}
.up .sel.was-invalid:invalid,.drop.was-invalid:has(input:invalid){border-color:#E5484D;box-shadow:0 0 0 3px rgba(229,72,77,.15)}
.btn.is-busy{opacity:.85;cursor:progress}
.btn.is-busy::before{content:"";width:14px;height:14px;margin-right:8px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;display:inline-block;vertical-align:-2px;animation:tkspin .8s linear infinite}
@keyframes tkspin{to{transform:rotate(360deg)}}

/* ---------- Phone layout ---------- */
.show-sm,.show-sm-b{display:none}
.ro-note{font-size:13px;color:var(--ink);margin:10px 0 0}
.tk-grid{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
@media (max-width:640px){
  .wrap{padding-left:16px;padding-right:16px}
  /* Buttons: a touch smaller on phones (still 36px+ tap targets) */
  .btn{min-height:44px;padding:0 18px;font-size:15px;border-radius:11px}
  .btn-sm{min-height:36px;padding:0 12px;font-size:13.5px;border-radius:9px}
  .hide-sm{display:none !important}
  .show-sm{display:inline}
  .show-sm-b{display:block}
  main{padding-top:20px}
  /* Homepage: tighter top, shorter intro */
  main:has(> .lhero){padding-top:0}
  .lhero{padding:18px 0 4px}
  .lsec{padding:36px 0}
  .lh2{margin-bottom:16px}
  .lhero .eyebrow{margin-bottom:10px;font-size:12px}
  .lhero .ldisplay{font-size:34px;line-height:1.08}
  .lhero .llead{font-size:17px;margin-bottom:18px}
  .lhero .tt-btn,.lhero .btn{width:100%}
  /* Brand dashboard: price and a full-width button across the card */
  .bi .bi-p{grid-column:1 / -1;justify-content:space-between}
  .bi .bi-p .btn{flex:1 1 auto;max-width:70%}
  /* Creator header: logo row, then one swipeable row of tabs */
  .top .wrap{gap:8px 10px;padding-top:10px;padding-bottom:8px}
  .top .logo{font-size:21px}
  .top .plan-pill{font-size:12px;padding:5px 10px}
  .top .tabs{order:10;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;gap:2px;margin:0 -16px;padding:0 16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .top .tabs::-webkit-scrollbar{display:none}
  .top .tab{min-height:40px;padding:0 7px;font-size:13.5px;white-space:nowrap;flex:1 0 auto}
  .top .tab .count{margin-left:4px}
  .top .top-out .tab{min-height:36px;padding:0 10px;font-size:13px}
  /* Brand header */
  .bp-top-in{gap:8px;flex-wrap:nowrap}
  .bp-top-in .btn-sm{min-height:36px;padding:0 11px;font-size:13px;white-space:nowrap}
  .bp-top-in .logo{font-size:21px}
  /* Tikle cards: price on one line, full-width button under it */
  .tk-card{gap:12px}
  .tk-th{width:84px;height:112px}
  .tk-f{flex-wrap:wrap}
  .tk-f .btn{flex:1 1 100%;min-height:38px}
  /* Tables become stacked cards */
  .tablebox{border:none;background:none;overflow:visible}
  .tablebox .table,.tablebox .table tbody,.tablebox .table tr,.tablebox .table td{display:block;width:auto}
  .tablebox .table{background:none}
  .tablebox .table thead{display:none}
  .tablebox .table tr{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
  .tablebox .table td{border:none;padding:4px 0}
  .tablebox .table td:first-child{font-size:16px;padding-top:0}
  .tablebox .table td[data-label]{display:flex;justify-content:space-between;gap:12px}
  .tablebox .table td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:13px}
  .tablebox .table td:last-child:not(:empty){padding-top:10px}
  .tablebox .table td:last-child{display:flex;flex-wrap:wrap;gap:8px}
  .tablebox .table td:last-child:empty{display:none}
  .tablebox .table td:last-child > *{flex:1 1 0;min-width:0}
  .tablebox .table td:last-child form{display:flex}
  .tablebox .table td .acts{display:flex;flex-wrap:nowrap;gap:8px;width:100%}
  .tablebox .table td .acts > *{flex:1 1 0;min-width:0;display:flex}
  .tablebox .table td .btn{width:100%}
  .tablebox .table .thumbs{flex-wrap:wrap}
  /* General: long rows wrap instead of spilling */
  .headrow,.actions-row{flex-wrap:wrap}
  .actions-row .btn{flex:1 1 100%}
  .msgreply{flex-wrap:wrap}
  .msgreply input{flex:1 1 100%;min-width:0;min-height:42px}
  .msgreply .btn{flex:1 1 100%}
  .prow{gap:10px !important}
  .statbox{flex:1 1 calc(50% - 5px) !important;padding:12px 14px !important}
  .statbox .h1{font-size:24px}
}
@media (max-width:420px){.bp-top-in .pill-purple{display:none}}

/* Homepage deals card: each row takes its status colour */
.deal.deal-won{background:#ECFAF1;border-color:#A9E2BE}
.deal.deal-won .deal-pill{background:#1F9D55;color:#fff}
.deal.deal-won .deal-amt{color:#14833F}
.deal.deal-neg{background:#FFF5EA;border-color:#F6CFA2}
.deal.deal-neg .deal-pill{background:#F08A24;color:#fff}
.deal.deal-sent{background:#F1F2FD;border-color:#CDD2F6}
.deal.deal-sent .deal-pill{background:#5B5BD6;color:#fff}
.deal .deal-sub{color:#6B6B74}
.deal.deal-won:hover,.deal.deal-neg:hover,.deal.deal-sent:hover{filter:brightness(1.02)}
@media (max-width:640px){
  .hero-art{padding:14px;gap:10px;border-radius:20px}
  .ha-title{font-size:16px}
  .deals{gap:8px}
  .deals .deal:first-child{display:none}          /* phones: 3 example deals */
  .deal{grid-template-columns:40px minmax(0,1fr) auto;gap:10px;padding:8px 12px 8px 8px;border-radius:13px}
  .deal img,.deal .noimg{width:40px;height:52px;border-radius:8px}
  .deal{align-items:center}
  .deal-cap{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal;overflow:hidden;font-size:12.5px;line-height:1.3}
  .deal-views,.deal-sub{display:none}
  .deal-r{justify-content:center;gap:4px}
  .deal-amt{font-size:18px}
  .lticks{margin-top:10px}
}
/* Phones: tighter spacing everywhere */
@media (max-width:640px){
  main{padding-bottom:40px}
  .card{padding:16px;border-radius:16px}
  .ai{padding:16px;margin-bottom:20px;border-radius:18px}
  .profile{margin-bottom:16px;padding:12px 14px}
  .headrow{margin-bottom:14px;gap:10px}
  .h1{margin-bottom:4px}
  .lsteps,.lwhys{gap:12px}
  .lstep{padding:14px 16px;border-radius:16px;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:start}
  .lstep .lnum{grid-row:span 2;width:30px;height:30px;font-size:14px}
  .lstep h3{margin:3px 0 4px;font-size:17px}
  .lstep p,.lwhy p{margin:0}
  .lwhy h3{margin:0 0 4px}
  .lfoot{gap:12px;padding-top:20px;padding-bottom:28px}
  .stack{gap:12px}
}
/* My Content: profile card with the Pro box beside it (desktop) or under it, full width (phones) */
.profile-row{display:flex;align-items:stretch;gap:14px;margin-bottom:28px}
.profile-row .profile{flex:1 1 auto;margin-bottom:0}
.profile-row .gopro{flex:none;align-self:center}
@media (max-width:640px){
  .profile-row{flex-direction:column;gap:10px;margin-bottom:16px}
  .profile-row .gopro{align-self:stretch;width:100%;padding:12px 14px}
  .profile .pstats{width:100%;justify-content:flex-start;gap:0}
  .profile .ps{padding:0 18px;min-width:0}
  .profile .ps:first-child{padding-left:0}
}
/* Video drawer header: thumbnail left, details stacked right */
.dhead{align-items:flex-start;padding-right:52px;position:relative}
.dhead .x{position:absolute;top:0;right:0}
.dh-b{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.dh-t{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dh-sug{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.ai-mini{font-size:10px;font-weight:700;background:var(--blue-bg);color:var(--blue-dk);border-radius:999px;padding:1px 6px;margin-right:2px}
.dh-tt{font-size:13px;font-weight:600;color:var(--blue-dk);margin-top:2px;align-self:flex-start}
@media (max-width:640px){
  .dhead{gap:12px}
  .dhead img,.dhead .noimg{width:78px;height:104px}
  .bestm-name{font-size:24px}
  .dh-t{font-family:inherit;font-size:14.5px;font-weight:600;line-height:1.35;letter-spacing:0}
}
/* Brand Tikle page */
.checkout2 .is-off{opacity:.45;pointer-events:none}
.selall{flex:none}
@media (max-width:640px){
  .bp-main{padding-top:16px}
  .bp-intro{gap:12px;align-items:flex-start}
  .bp-intro .avatar{width:48px !important;height:48px !important}
  .bp-intro .h1{font-size:22px;line-height:1.2}
  .bp-stats{gap:6px}
  .bp-sec-h{margin-bottom:10px}
  .bp-sec-h .h2{font-size:18px}
  .selbar{flex-direction:row;align-items:center;gap:10px;padding:12px 14px}
  .selbar > div:first-child .small{display:none}
  .selbar-r{display:flex;align-items:center;gap:8px;margin-left:auto}
  /* Video cards: compact, full width, tick box in line with the price */
  .bvs{gap:8px}
  .bv{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"th b b" "th p k";gap:4px 12px;padding:10px 12px 10px 10px;align-items:start;border-radius:14px}
  .bv-th{grid-area:th;width:56px;height:75px;align-self:center}
  .bv-b{grid-area:b;gap:4px 10px;flex-direction:row;flex-wrap:wrap;align-items:center}
  .bv-b .bv-t{flex:1 1 100%}
  .bv-t{font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .bv-meta .chip-s{font-size:11.5px;padding:1px 8px}
  .bv-meta{gap:6px;align-items:center}
  .bv-act{font-size:12.5px;gap:10px}
  .bv-act .btn{min-height:32px;padding:0 10px;font-size:12.5px}
  .bv-p{grid-area:p;flex-direction:row;align-items:baseline;gap:6px;text-align:left;align-self:end}
  .bv-p strong{font-size:18px}
  .bv-p .muted{order:2;font-size:12px}
  .bv-pick{grid-area:k;position:static;align-self:end;justify-self:end;padding:5px 10px 5px 7px}
}
@media (max-width:640px){.reachpro-sm{display:flex !important;width:100%;margin-bottom:14px;padding:12px 14px}.reachpro-sm .gp-go{margin-left:auto}}
/* Homepage: lavender tick points */
.lhero .llead{margin-bottom:16px}
.lpoints{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:10px}
.lpoints li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.4;color:var(--ink)}
.lpoints li::before{content:"";width:24px;height:24px;border-radius:50%;background:#A08FF2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 2px 6px rgba(109,91,208,.28)}
.lpoints strong{font-weight:600;color:var(--blue-dk)}
.ro-note{display:block}
@media (max-width:640px){
  .lpoints{gap:9px;margin-bottom:20px}
  .lpoints li{font-size:15px;grid-template-columns:22px minmax(0,1fr);gap:10px}
  .lpoints li::before{width:22px;height:22px;background-size:14px;margin-top:1px}
}
/* Hero: deals card visible straight away */
@media (min-width:641px){.lhero{padding-top:44px}}
.lhero-in{align-items:start}

/* ---------- Homepage hero card (tilted, with lavender shapes) ---------- */
.hc-wrap{position:relative;padding:28px 18px 34px;isolation:isolate}
.hc-blob{position:absolute;z-index:-1;background:#C9BDF9;opacity:.55;filter:blur(.5px)}
.hc-b1{left:-6%;top:22%;width:46%;height:58%;border-radius:58% 42% 55% 45%/50% 60% 40% 50%}
.hc-b2{right:-5%;bottom:4%;width:40%;height:50%;border-radius:45% 55% 40% 60%/55% 45% 55% 45%;opacity:.45}
.hc-spark{position:absolute;width:52px;height:52px;color:#7C5CF0;z-index:1}
.hc-s1{right:2%;top:-2%;transform:rotate(8deg)}
.hc-s2{left:-1%;top:52%;transform:rotate(200deg)}
.hc{background:#fff;border:1px solid #ECEAF3;border-radius:26px;padding:22px 22px 16px;box-shadow:0 2px 4px rgba(21,21,26,.04),0 30px 70px rgba(60,40,140,.16);transform:rotate(-2.5deg);display:flex;flex-direction:column;gap:14px}
.hc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 4px}
.hc-title{font:700 22px/1.15 'Space Grotesk',sans-serif;letter-spacing:-.01em;color:#15151A}
.hc-sub{font-size:13.5px;color:var(--muted);margin-top:3px}
.hc-ex{font-size:12px;font-weight:600;color:#3B3B44;border:1px solid #D8D5CE;border-radius:999px;padding:3px 11px;white-space:nowrap}
.hc-rows{display:flex;flex-direction:column;gap:10px}
.hc-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:16px;align-items:center;border:1.5px solid;border-radius:18px;padding:10px 16px 10px 10px;opacity:0;transform:translateY(8px);animation:hcIn .5s ease forwards;animation-delay:var(--d,0ms)}
.hc-row img,.hc-row .noimg{width:64px;height:64px;object-fit:cover;border-radius:12px;display:block}
.hc-b{min-width:0;display:flex;flex-direction:column;gap:2px}
.hc-brand{font:700 18px/1.2 'Space Grotesk',sans-serif;color:#15151A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-views{font-size:14px;color:#55555E}
.hc-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.hc-pill{font-size:12px;font-weight:700;color:#fff;border-radius:999px;padding:3px 10px;white-space:nowrap}
.hc-amt{font:700 26px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.hc-note{font-size:12px;color:#55555E;white-space:nowrap}
.hc-won{background:#ECFAF1;border-color:#A9E2BE}.hc-won .hc-pill{background:#1F9D55}.hc-won .hc-amt{color:#14833F}
.hc-neg{background:#FFF5EA;border-color:#F6CFA2}.hc-neg .hc-pill{background:#F08A24}.hc-neg .hc-amt{color:#15151A}
.hc-foot{text-align:center;font-size:13.5px;color:#3B3B44;padding-top:2px}
@keyframes hcIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hc-row{animation:none;opacity:1;transform:none}}
.ll-h{display:block;font:700 26px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.01em;color:var(--ink);margin-bottom:6px}
.lhero-in > .hc-wrap{align-self:center}

@media (max-width:720px){
  /* Phones: headline, card, then "pay twice", ticks and the TikTok button */
  .lhero-in{display:flex;flex-direction:column;gap:0}
  .lhero-copy{display:contents}
  .lhero-copy > .eyebrow{order:1;margin-bottom:12px}
  .lhero-copy > .ldisplay{order:2;font-size:40px;line-height:1.02;margin:0}
  .lhero-in > .hc-wrap{order:3;margin:6px -4px 4px}
  .lhero-copy > .llead{order:4;margin:0 0 16px}
  .lhero-copy > .lpoints{order:5;margin-bottom:20px}
  .lhero-copy > .hero-tt{order:6}
  .lhero-copy > *{order:7}
  .lhero-copy > .ro-note{order:6;white-space:normal;margin-bottom:6px}
  .ll-h{font-size:25px}
  .lhero .llead{font-size:17px;line-height:1.45}
  .hc-wrap{padding:18px 10px 24px}
  .hc{padding:16px 14px 12px;border-radius:22px;gap:11px;transform:rotate(-2deg)}
  .hc-title{font-size:19px}.hc-sub{font-size:12.5px}.hc-ex{font-size:11px;padding:2px 9px}
  .hc-rows{gap:8px}
  .hc-row{grid-template-columns:52px minmax(0,1fr) auto;gap:12px;padding:8px 12px 8px 8px;border-radius:15px}
  .hc-row img,.hc-row .noimg{width:52px;height:52px;border-radius:10px}
  .hc-brand{font-size:16px}.hc-views{font-size:12.5px}
  .hc-pill{font-size:10.5px;padding:2px 8px}
  .hc-amt{font-size:22px}
  .hc-note{font-size:11px}
  .hc-foot{font-size:12.5px}
  .hc-spark{width:40px;height:40px}
  .hc-s1{right:-2%;top:-4%}
  .hc-s2{left:-3%;top:50%}
}
/* Phones: slimmer deals card so the TikTok button reaches the first screen */
@media (max-width:720px){
  .lhero{padding-top:12px}
  .lhero-copy > .eyebrow{margin-bottom:8px;font-size:11.5px}
  .lhero-copy > .ldisplay{font-size:36px}
  .hc-wrap{padding:10px 8px 14px}
  .hc{padding:12px 12px 9px;gap:8px;border-radius:20px}
  .hc-head{align-items:center}
  .hc-title{font-size:16.5px}
  .hc-sub{font-size:11.5px;margin-top:1px}
  .hc-rows{gap:6px}
  .hc-row{grid-template-columns:38px minmax(0,1fr) auto;gap:10px;padding:5px 10px 5px 5px;border-radius:12px}
  .hc-row img,.hc-row .noimg{width:38px;height:38px;border-radius:8px}
  .hc-brand{font-size:14.5px}
  .hc-views{font-size:11.5px}
  .hc-r{flex-direction:row;align-items:center;gap:7px}
  .hc-note{display:none}
  .hc-amt{font-size:19px}
  .hc-foot{font-size:11.5px;padding-top:0}
  .hc-spark{width:32px;height:32px}
  .lhero-copy > .llead{margin-bottom:12px}
  .ll-h{font-size:22px;margin-bottom:4px}
  .lhero .llead{font-size:16px}
  .lpoints{gap:7px}
  .lpoints li{font-size:14.5px}
}
@media (max-width:720px){
  .lhero-copy > *{order:7}
  .lhero-copy > .eyebrow{order:1}
  .lhero-copy > .ldisplay{order:2}
  .lhero-copy > .hero-tt{order:4;margin-top:4px}
  .lhero-copy > .ro-note{order:4;margin:8px 0 22px;text-align:center}
  .lhero-copy > .llead{order:5}
  .lhero-copy > .lpoints{order:6}
}
@media (max-width:720px){
  /* ticks: short, one line each, above the button */
  .lhero-copy > .lpoints{order:4;margin:2px 0 14px;gap:6px}
  .lhero-copy > .hero-tt{order:5;margin-top:0}
  .lhero-copy > .ro-note{order:5;margin:8px 0 22px}
  .lhero-copy > .llead{order:6}
  .lpoints li{font-size:14.5px;grid-template-columns:20px minmax(0,1fr);gap:9px;white-space:nowrap}
  .lpoints li > span{overflow:hidden;text-overflow:ellipsis}
  .lpoints li::before{width:20px;height:20px;background-size:13px;margin-top:0}
  .lhero-copy > .ldisplay{font-size:34px}
  .hc-wrap{padding:8px 8px 10px}
}
/* Premium card: deeper shadows, glossy rows, richer shapes */
.hc{border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 2px 6px rgba(21,21,26,.06),0 18px 40px rgba(76,52,180,.18),0 50px 90px rgba(76,52,180,.22)}
.hc-row{box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 4px 12px rgba(21,21,26,.07)}
.hc-won{background:linear-gradient(180deg,#F2FCF6,#E3F7EB)}
.hc-neg{background:linear-gradient(180deg,#FFF8EF,#FFEEDB)}
.hc-row img,.hc-row .noimg{box-shadow:0 4px 10px rgba(21,21,26,.22)}
.hc-pill{box-shadow:0 2px 6px rgba(21,21,26,.18)}
.hc-blob{background:linear-gradient(140deg,#B9A8FA,#D9CEFC);opacity:.7}
.hc-b2{opacity:.6}
.hc-ex{background:#fff;box-shadow:0 1px 3px rgba(21,21,26,.08)}
.hc-spark{color:#6D4CF0}
@media (max-width:720px){
  .lhero{padding-top:12px}
  .lhero-copy > .eyebrow{margin-bottom:6px}
  .lhero-copy > .ldisplay{font-size:33px;line-height:1.02}
  .hc-wrap{padding:6px 8px 12px;margin-top:2px !important}
  .lpoints li{font-size:14.5px}
}