/* Theme toggle, the theme switch animation and hand-tuned dark values. Loads after the generated
   theme-dark*.css (scripts/build_theme.py), so rules here win. */
.theme-toggle.theme-toggle{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer;position:relative;transition:background-color .2s,transform .2s cubic-bezier(.2,.9,.3,1.4)}
.theme-toggle:hover{background:color-mix(in srgb,currentColor 9%,transparent)}
.theme-toggle:active{transform:scale(.88)}
.theme-toggle.theme-toggle .icon{width:1.2rem;height:1.2rem;grid-area:1/1;margin:0;transition:opacity .25s,transform .45s cubic-bezier(.2,.9,.3,1.2)}
[data-theme-toggle] .t-auto,[data-theme-toggle] .t-sun,[data-theme-toggle] .t-moon{opacity:0;transform:rotate(-90deg) scale(.5)}
:root[data-theme-pref=system] [data-theme-toggle] .t-auto,:root[data-theme-pref=light] [data-theme-toggle] .t-sun,:root[data-theme-pref=dark] [data-theme-toggle] .t-moon,:root:not([data-theme-pref]) [data-theme-toggle] .t-auto{opacity:1;transform:none}
.mobile-theme{display:flex;align-items:center;gap:.7rem;width:100%;padding:.75rem .9rem;border-radius:.9rem;background:transparent;color:inherit;font:inherit;cursor:pointer;text-align:left}
.mobile-theme .icon{width:1.15rem;height:1.15rem;transition:opacity .25s,transform .45s}
.mobile-theme .t-auto,.mobile-theme .t-sun,.mobile-theme .t-moon{position:absolute}
.mobile-theme span{margin-left:1.85rem}
/* Hub -> platform cross-link */
.platform-link{display:inline-flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:999px;font-size:.82rem;font-weight:600;white-space:nowrap;background:linear-gradient(120deg,color-mix(in srgb,var(--ink) 7%,transparent),color-mix(in srgb,var(--ink) 3%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);transition:transform .2s,box-shadow .2s}
.platform-link:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 30%,transparent);color:inherit}
.platform-link .icon{width:1rem;height:1rem}
/* the header is at most ~1280px wide: with 獎學金 in the nav the platform link is an icon (its title and aria-label name it) */
.platform-link span{display:none}.platform-link{padding:.55rem}
@media (max-width:700px){.platform-link{display:none}}
.mobile-platform-link .icon:last-child{width:.9rem;height:.9rem;opacity:.6;margin-left:auto}
.theme-toggle-label{font-size:.82rem}

/* Circular reveal from the toggle (View Transitions). The hub's page-navigation transitions name parts of
   the page and switch the root snapshot off, so during a theme switch the whole page is one snapshot again. */
:root.theme-anim{view-transition-name:root!important}
:root.theme-anim *{view-transition-name:none!important}
:root.theme-anim::view-transition-old(root),:root.theme-anim::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.theme-anim::view-transition-new(root){animation:theme-reveal .55s cubic-bezier(.4,0,.2,1)}
@keyframes theme-reveal{from{clip-path:circle(0 at var(--theme-x,50%) var(--theme-y,0))}to{clip-path:circle(150vmax at var(--theme-x,50%) var(--theme-y,0))}}

/* ---------- dark: hand-tuned ---------- */
:root[data-theme=dark]{color-scheme:dark;--bg:#111112;--surface:#1c1c1e;--ink:#ececee;--muted:#a1a4a9;--line:#323235;--accent:#f2f2f3;--accent-hover:#ffffff;--shadow:0 0 0 1px #ffffff12,0 8px 30px #00000059}
:root[data-theme=dark] img:not([src$=".svg"]){filter:brightness(.92)}
:root[data-theme=dark] ::selection{background:#4b5563;color:#fff}
/* Logos drawn in black on transparent stay readable. */
:root[data-theme=dark] img[src*="molekiu-lockup"],:root[data-theme=dark] img[src*="molekiu-dots"],:root[data-theme=dark] img[src*="mark.svg"]{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
/* Printed artefacts keep paper colours even in dark mode. */
:root[data-theme=dark] .printable-document,:root[data-theme=dark] .notice-ai-pages img{color-scheme:light}

/* 老師 | 學生・家長 switch (base.html): one size and one place in both versions, so the same spot switches
   back; the knob shows where you are and crosses over when clicked (site.js) before the page changes. */
.version-switch{position:relative;isolation:isolate;flex:none;display:inline-grid;grid-template-columns:1fr 1fr;align-items:stretch;margin:0 .25rem;padding:.2rem;border-radius:999px;
  background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 12%,transparent);color:var(--ink);text-decoration:none;white-space:nowrap;transition:box-shadow .2s}
.version-switch:hover{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 28%,transparent);color:var(--ink)}
.version-switch:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.vs-opt{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:.3rem;padding:.32rem .75rem;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--muted);transition:color .3s ease}
.vs-opt .icon{width:.95rem;height:.95rem}
.vs-knob{position:absolute;z-index:0;top:.2rem;bottom:.2rem;left:.2rem;width:calc((100% - .4rem) / 2);border-radius:999px;background:var(--ink);box-shadow:0 2px 8px rgb(0 0 0 / .16);transition:transform .38s cubic-bezier(.3,1.3,.5,1)}
.version-switch.is-family .vs-knob,.version-switch.is-switching:not(.is-family) .vs-knob{transform:translateX(100%)}
.version-switch.is-family.is-switching .vs-knob{transform:none}
.version-switch:not(.is-family):not(.is-switching) .vs-teacher,.version-switch.is-family:not(.is-switching) .vs-family,
.version-switch.is-switching:not(.is-family) .vs-family,.version-switch.is-family.is-switching .vs-teacher{color:var(--bg)}
@media (max-width:1300px){.vs-opt>span{display:none}.vs-opt{padding:.38rem .62rem}}
@media (max-width:1180px){.header-subscribe>span{display:none}.header-subscribe{padding-inline:.6rem}}   /* both versions, so the switch stays put */
@media (max-width:700px){.version-switch{display:none}}
@media (prefers-reduced-motion:reduce){.vs-knob,.vs-opt{transition:none}}
/* 熱門比賽專題 in the footer of every page (base.html, portal/landings.py FOOTER) */
.footer-topics{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:.2rem 1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.footer-topics span{font-size:.75rem;font-weight:700;color:var(--muted)}
.footer-topics a{font-size:.75rem;color:var(--muted);text-decoration:none}
.footer-topics a:hover{color:var(--ink);text-decoration:underline}

/* 熱門專題 index (templates/portal/_topic_tiles.html): both home pages and the foot of each topic page. A contents page,
   not a grid of icon tiles: hairlines, the count in large figures, live facts, and covers of real items that fan out on
   hover. site.js sets [data-animate] and then .is-in once the list scrolls into view; without it everything shows as is. */
.topic-section{margin:0 0 2.8rem}
.topic-section .section-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:.5rem 1rem;margin-bottom:.6rem}
.topic-section .section-heading h2{margin:.2rem 0 0}
.topic-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.6rem;margin:0;padding:0;list-style:none}
.topic-index>li{position:relative;min-width:0}
.topic-index>li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line);transform-origin:left;pointer-events:none}
.ti-row{position:relative;isolation:isolate;display:grid;grid-template-columns:4.6rem minmax(0,1fr) auto 1.2rem;align-items:center;gap:.9rem;
  min-height:5.6rem;padding:.9rem .6rem .9rem .2rem;color:var(--ink);text-decoration:none}
/* hover: a wash sweeps in from the left */
.ti-row::before{content:"";position:absolute;inset:.35rem -.6rem;z-index:-1;border-radius:1rem;background:var(--surface);box-shadow:var(--shadow);
  transform:scaleX(.6);transform-origin:left;opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease}
.ti-row:hover::before,.ti-row:focus-visible::before{transform:none;opacity:1}
.ti-count{display:flex;align-items:baseline;gap:.15rem}
.ti-count b{font-size:2.5rem;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ti-count small{font-size:.8rem;color:var(--muted)}
.ti-body{display:grid;gap:.3rem;min-width:0}
.ti-name{font-size:1.06rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-meta{display:flex;flex-wrap:wrap;gap:.1rem .7rem;font-size:.8rem;color:var(--muted)}
.ti-open{display:inline-flex;align-items:center;gap:.4rem;color:#0b8a5a;font-weight:700}
:root[data-theme=dark] .ti-open{color:#53d69a}
.ti-open i{position:relative;width:.5rem;height:.5rem;border-radius:50%;background:currentColor}
.ti-open i::after{content:"";position:absolute;inset:0;border-radius:50%;background:currentColor;opacity:0}
/* covers of real items, stacked like photos; they fan out and straighten on hover */
.ti-covers{position:relative;width:7.2rem;height:3.4rem}
.ti-covers img{position:absolute;right:0;top:.2rem;width:3rem;height:3rem;object-fit:cover;border-radius:.7rem;border:2px solid var(--bg);
  box-shadow:0 6px 14px -8px rgb(0 0 0 / .45);z-index:calc(3 - var(--n));
  transform:translateX(calc(var(--n) * -1.25rem)) rotate(calc((var(--n) - 1) * 5deg));
  transition:transform .5s cubic-bezier(.3,1.4,.5,1),opacity .4s ease}
.ti-row:hover .ti-covers img,.ti-row:focus-visible .ti-covers img{transform:translateX(calc(var(--n) * -2.15rem)) translateY(-.15rem) rotate(0)}
.ti-go{color:var(--muted);transition:transform .3s cubic-bezier(.2,.8,.2,1),color .2s}
.ti-row:hover .ti-go,.ti-row:focus-visible .ti-go{transform:translateX(4px);color:var(--ink)}

/* entrance, once (site.js): the line draws, the row rises, the covers drop in, the green dot pings twice */
.topic-index[data-animate]>li::before{transform:scaleX(0);transition:transform .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms)}
.topic-index[data-animate] .ti-row{opacity:0;transform:translateY(10px);transition:opacity .45s ease calc(var(--i) * 55ms + 80ms),transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + 80ms)}
.topic-index[data-animate] .ti-covers img{opacity:0;transform:translate(.6rem,-.8rem) scale(.6) rotate(12deg)}
.topic-index.is-in>li::before{transform:none}
.topic-index.is-in .ti-row{opacity:1;transform:none}
.topic-index.is-in .ti-covers img{opacity:1;transform:translateX(calc(var(--n) * -1.25rem)) rotate(calc((var(--n) - 1) * 5deg));
  transition-delay:calc(var(--i) * 55ms + 260ms + (2 - var(--n)) * 70ms)}
.topic-index.is-in .ti-row:hover .ti-covers img{transform:translateX(calc(var(--n) * -2.15rem)) translateY(-.15rem) rotate(0);transition-delay:0s}
.topic-index.is-in .ti-open i::after{animation:ti-ping 1.4s ease-out calc(var(--i) * 55ms + .6s) 2}
@keyframes ti-ping{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(3)}}
@media (max-width:820px){
  .topic-index{grid-template-columns:minmax(0,1fr)}
  .ti-row{grid-template-columns:3.6rem minmax(0,1fr) auto 1rem;gap:.7rem;min-height:5rem}
  .ti-count b{font-size:2rem}
  .ti-covers{width:5.4rem;height:2.9rem}
  .ti-covers img{width:2.5rem;height:2.5rem;border-radius:.6rem}
}
@media (max-width:420px){.ti-covers img:nth-child(3){display:none}.ti-covers{width:4.4rem}}
@media (prefers-reduced-motion:reduce){.ti-row::before,.ti-covers img,.ti-go{transition:none}}
:root.reduceMotion .ti-row::before,:root.reduceMotion .ti-covers img,:root.reduceMotion .ti-go{transition:none}
/* 這些情報，值得留意: items the system added to fill the row (views.home_picks) */
.pick-auto{display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;color:var(--muted)}
.pick-auto .icon{width:.85rem;height:.85rem}
/* 想再試一次？ dialog (templates/portal/_trial_email.html, static/js/trial-email.js): opens when someone presses generate
   after the free try. It rises out of a blurred page, steps slide sideways, the code goes in six boxes, and a drawn tick
   closes it before the generation carries on. Reduced motion: no movement, the same steps. */
.te-dialog{width:min(30rem,calc(100vw - 2rem));max-height:calc(100dvh - 2rem);margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.te-dialog::backdrop{background:rgb(10 12 16 / .48);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.te-card{position:relative;overflow:hidden auto;max-height:calc(100dvh - 2rem);padding:1.5rem 1.5rem 1.3rem;border-radius:1.6rem;background:var(--bg);
  box-shadow:0 30px 80px -24px rgb(0 0 0 / .55),0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent)}
.te-card::before{content:"";position:absolute;inset:0 0 auto;height:9rem;z-index:0;pointer-events:none;
  background:radial-gradient(60% 120% at 10% 0%,#d6e6ff,transparent 70%),radial-gradient(50% 110% at 95% 0%,#ffe6c7,transparent 70%)}
:root[data-theme=dark] .te-card::before{background:radial-gradient(60% 120% at 10% 0%,#17304f,transparent 70%),radial-gradient(50% 110% at 95% 0%,#3a2914,transparent 70%)}
.te-card>*{position:relative;z-index:1}
.te-close{position:absolute;right:.8rem;top:.8rem;z-index:2}
.te-head{display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.te-head h2{margin:0;font-size:1.35rem}
.te-head p{margin:.15rem 0 0;color:var(--muted);font-size:.9rem}
.te-badge{flex:none;display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:1.1rem;background:var(--ink);color:var(--bg);box-shadow:0 10px 24px -12px rgb(0 0 0 / .6)}
.te-badge b{font-size:1.35rem;font-weight:800;letter-spacing:-.03em}
.te-steps{display:flex;gap:.5rem;margin:0 0 1rem;padding:0;list-style:none;counter-reset:te}
.te-steps li{counter-increment:te;display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--muted);transition:color .3s}
.te-steps li::before{content:counter(te);display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;border:1.5px solid var(--line);font-size:.72rem;font-weight:700;transition:background-color .3s,color .3s,border-color .3s}
.te-steps li+li::after{content:none}
.te-steps li+li{padding-left:.5rem;border-left:1px solid var(--line)}
.te-steps li.is-on{color:var(--ink);font-weight:600}
.te-steps li.is-on::before{background:var(--ink);border-color:var(--ink);color:var(--bg)}
/* the three steps sit side by side; the card shows one at a time */
.te-viewport{display:grid;overflow:hidden}
.te-pane{grid-area:1/1;display:grid;gap:.6rem;align-content:start;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .3s ease,visibility 0s .45s}
.te-card[data-step="1"] .te-pane-2,.te-card[data-step="1"] .te-pane-3{transform:translateX(110%);opacity:0;visibility:hidden}
.te-card[data-step="2"] .te-pane-1{transform:translateX(-110%);opacity:0;visibility:hidden}
.te-card[data-step="2"] .te-pane-3{transform:translateX(110%);opacity:0;visibility:hidden}
.te-card[data-step="3"] .te-pane-1,.te-card[data-step="3"] .te-pane-2{transform:translateX(-110%);opacity:0;visibility:hidden}
.te-card[data-step="1"] .te-pane-1,.te-card[data-step="2"] .te-pane-2,.te-card[data-step="3"] .te-pane-3{transition-delay:0s,0s,0s}
/* panes that are out of view leave the flow, so the card is as tall as the step on show */
.te-card[data-step="1"] :is(.te-pane-2,.te-pane-3),.te-card[data-step="2"] :is(.te-pane-1,.te-pane-3),.te-card[data-step="3"] :is(.te-pane-1,.te-pane-2){position:absolute;inset:0 0 auto}
.te-viewport{position:relative}
.te-label{font-size:.85rem;font-weight:600}
.trial-roles{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .2rem;padding:0;border:0}
.trial-roles legend{width:100%;margin-bottom:.45rem;font-size:.85rem;font-weight:600}
.trial-roles label{position:relative;cursor:pointer}
.trial-roles input{position:absolute;opacity:0;pointer-events:none}
.trial-roles span{display:inline-flex;align-items:center;min-height:2.4rem;padding:.35rem .95rem;border-radius:99px;border:1px solid var(--line);background:var(--surface);font-size:.9rem;font-weight:600;
  transition:background-color .2s,color .2s,border-color .2s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.trial-roles label:active span{transform:scale(.95)}
.trial-roles input:checked+span{background:var(--ink);color:var(--bg);border-color:var(--ink);transform:scale(1.04)}
.trial-roles input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.trial-school{display:grid;gap:.3rem;font-size:.85rem;font-weight:600;animation:te-in .35s cubic-bezier(.2,.8,.2,1)}
/* the one consent box: a card that says what arrives, never pre-ticked; the tick pops when chosen */
.trial-consent{display:flex;gap:.75rem;align-items:flex-start;margin:.35rem 0 .1rem;padding:.9rem 1rem;border-radius:1rem;border:1.5px solid var(--line);background:var(--surface);cursor:pointer;
  transition:border-color .25s,background-color .25s,box-shadow .25s}
.trial-consent:hover{border-color:color-mix(in srgb,#0b8a5a 45%,var(--line))}
.trial-consent input{position:absolute;opacity:0;pointer-events:none}
.te-tick{flex:none;display:grid;place-items:center;width:1.35rem;height:1.35rem;margin-top:.05rem;border-radius:.4rem;border:1.5px solid var(--muted);color:#fff;transition:background-color .2s,border-color .2s}
.te-tick .icon{width:.85rem;height:.85rem;transform:scale(0);transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.trial-consent:has(input:checked){border-color:#0b8a5a;background:color-mix(in srgb,#0b8a5a 9%,var(--surface));box-shadow:0 10px 26px -18px #0b8a5a}
.trial-consent:has(input:checked) .te-tick{background:#0b8a5a;border-color:#0b8a5a}
.trial-consent:has(input:checked) .te-tick .icon{transform:scale(1)}
.trial-consent:has(input:focus-visible){outline:2px solid #0b8a5a;outline-offset:2px}
.trial-consent>span:last-child{display:grid;gap:.25rem}
.trial-consent strong{font-size:.95rem}
.trial-consent small{font-size:.8rem;line-height:1.6;color:var(--muted)}
.te-go{justify-self:stretch;justify-content:center;min-height:3rem;margin-top:.2rem}
.te-go.is-busy{opacity:.7;pointer-events:none}
.trial-pics{margin:.1rem 0 0;font-size:.72rem;line-height:1.6;color:var(--muted)}
.te-sent{margin:0;font-size:.9rem;color:var(--muted)}
.te-sent b{color:var(--ink);word-break:break-all}
.te-code{display:grid;grid-template-columns:repeat(6,1fr);gap:.45rem;margin:.4rem 0}
.te-code input{width:100%;min-width:0;height:3.4rem;padding:0!important;border-radius:.85rem;text-align:center;font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums;
  transition:border-color .2s,transform .2s cubic-bezier(.3,1.6,.5,1)}
.te-code input:focus{transform:translateY(-2px)}
.te-back{justify-self:center}
.te-pane-3{justify-items:center;text-align:center;padding:1rem 0 .4rem}
.te-done{width:4.4rem;height:4.4rem;fill:none;stroke:#0b8a5a;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.te-done circle{stroke-dasharray:151;stroke-dashoffset:151}
.te-done path{stroke-dasharray:36;stroke-dashoffset:36}
.te-card[data-step="3"] .te-done circle{animation:te-draw .55s ease-out .15s forwards}
.te-card[data-step="3"] .te-done path{animation:te-draw .35s ease-out .6s forwards}
.te-done-title{margin:.2rem 0 0;font-size:1.15rem;font-weight:700}
.te-done-note{margin:0;font-size:.85rem;color:var(--muted)}
.te-msg{margin:.7rem 0 0;padding:.6rem .8rem;border-radius:.8rem;background:color-mix(in srgb,#e8552f 10%,var(--surface));color:var(--ink);font-size:.85rem}
.te-card.is-shaking{animation:te-shake .4s cubic-bezier(.36,.07,.19,.97)}
@keyframes te-draw{to{stroke-dashoffset:0}}
@keyframes te-in{from{opacity:0;transform:translateY(-6px)}}
@keyframes te-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
/* open and close */
@media (prefers-reduced-motion:no-preference){
  :root:not(.reduceMotion) .te-dialog[open] .te-card{animation:te-rise .5s cubic-bezier(.2,.9,.25,1.15)}
  :root:not(.reduceMotion) .te-dialog[open]::backdrop{animation:te-fade .35s ease}
  :root:not(.reduceMotion) .te-dialog[open] .te-badge{animation:te-pop .6s cubic-bezier(.3,1.8,.5,1) .15s backwards}
  :root:not(.reduceMotion) .te-dialog.is-closing .te-card{animation:te-sink .26s ease-in forwards}
  :root:not(.reduceMotion) .te-dialog.is-closing::backdrop{animation:te-fade .26s ease-in reverse forwards}
}
:root.reduceMotion .te-pane{transition:none}
@media (prefers-reduced-motion:reduce){.te-pane{transition:none}}
@keyframes te-rise{from{opacity:0;transform:translateY(24px) scale(.94)}}
@keyframes te-sink{to{opacity:0;transform:translateY(16px) scale(.96)}}
@keyframes te-fade{from{opacity:0}}
@keyframes te-pop{from{opacity:0;transform:scale(.3) rotate(-12deg)}}
@media (max-width:480px){.te-card{padding:1.25rem 1.1rem 1.1rem;border-radius:1.3rem}.te-code input{height:3rem;font-size:1.3rem}}
/* 每星期收比賽截止提醒？ after a trial, for an address verified without consent */
.trial-consent-later{margin:1.4rem 0;padding:1.3rem 1.4rem;border-radius:1.2rem;animation:te-in .45s cubic-bezier(.2,.8,.2,1)}
.trial-consent-later h2{display:flex;align-items:center;gap:.5rem;margin:0 0 .4rem;font-size:1.05rem}
.trial-email-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}