/* MatchMind AI — the signed-out page (docs/LANDING-PLAN.md): an example report up top, how it works, why it is not * general chat, the interview day, questions, then sign-up. Loaded after mi.css, only for signed-out visitors; every * rule hangs off #usce-mi like the rest of the plugin's styles. The report and its parts reuse the app's own classes. */ @property --s{syntax:"";inherits:true;initial-value:0} @property --on{syntax:"";inherits:true;initial-value:0} #usce-mi>.usce-mi-land{width:100%} .usce-mi-land{--land-max:1320px;--land-pad:clamp(56px,6.5vw,104px);--land-band:#F5F8FD;--orb:clamp(132px,12vw,196px)} #usce-mi .usce-mi-land ::selection{background:rgba(20,104,218,.18);color:var(--ink)} #usce-mi .usce-mi-land :is(input,textarea){caret-color:var(--blue)} .usce-mi-land-in{width:calc(100% - 2 * var(--gutter));max-width:var(--land-max);margin:0 auto} .usce-mi-land-sec{padding:var(--land-pad) 0} .usce-mi-land-sec.is-band{background:var(--land-band)} #usce-mi .usce-mi-land-title{font-size:clamp(30px,3.2vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;max-width:22ch} #usce-mi .usce-mi-land-sub{font-size:19px;line-height:1.5;color:#41566B;max-width:46ch;margin:0 0 clamp(32px,4vw,56px)} #usce-mi .usce-mi-land :is(.usce-mi-score,.usce-mi-land-num){font-variant-numeric:tabular-nums} #usce-mi-join{scroll-margin-top:110px} /* The app's line icons (icon(), 18px), sized for where they sit here. */ .usce-mi-land-rfoot svg,.usce-mi-land-yes svg{width:16px;height:16px} .usce-mi-land-yes svg{stroke-width:2.2} .usce-mi-land-art li svg{stroke-width:2} .usce-mi-land-need svg,.usce-mi-land-facts svg{width:20px;height:20px} /* A referral link's line, under the buttons. */ #usce-mi .usce-mi-land-copy>:is(.usce-mi-rf-invited,.usce-mi-notice){margin:18px 0 0;max-width:34em} /* A small spoken-by line: who says it (a chat bubble's name, not a heading's label). */ .usce-mi-land-who{display:block;margin:0 0 6px;font:700 13px/1.3 var(--disp);letter-spacing:.02em;color:var(--muted)} .usce-mi-land-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--pale);color:#0F55B5;font:700 12px/1.3 var(--disp);letter-spacing:.03em;white-space:nowrap} /* ---- the top: the copy on the left, the orb asking and its report on the right ---- */ .usce-mi-land-hero{position:relative;isolation:isolate;padding:clamp(28px,4vw,64px) 0 clamp(48px,5vw,80px)} .usce-mi-land-hero>.usce-mi-land-in{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,6.6fr);gap:clamp(32px,4.5vw,80px);align-items:center} #usce-mi .usce-mi-land-hero h1{font-size:clamp(40px,4.1vw,60px);font-weight:800;line-height:1.03;letter-spacing:-.032em;margin:0 0 24px;color:var(--ink)} #usce-mi .usce-mi-land-hero h1 em{font-style:normal;color:var(--blue)} #usce-mi .usce-mi-land-lede{font-size:19px;line-height:1.55;color:#41566B;max-width:31em;margin:0 0 32px} #usce-mi .usce-mi-land-need{display:flex;gap:10px;align-items:center;margin:22px 0 0;font-size:15px;color:var(--muted)} .usce-mi-land-need svg{flex:none;color:var(--blue)} /* The orb and its caption share the top row; the report spans the row under them. */ .usce-mi-land-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--orb);gap:22px 18px;align-items:center;padding-right:clamp(0px,3%,40px)} /* The pale panel the report stands on: depth for a white card on a white page. */ .usce-mi-land-stage::before{content:"";position:absolute;z-index:-1;left:-6%;right:-4%;top:calc(var(--orb) * .5);bottom:-28px;border-radius:32px;background:linear-gradient(160deg,#EEF4FD,#F7FAFE 70%)} .usce-mi-land-orb{position:relative;z-index:2;grid-column:2;grid-row:1;width:var(--orb);aspect-ratio:1/1} .usce-mi-land-orb canvas{position:absolute;left:-22%;top:-22%;width:144%;height:144%;display:block;pointer-events:none} .usce-mi-land-say{position:relative;z-index:2;grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:32em;padding:14px 18px 15px;border-radius:18px 18px 4px 18px;background:#fff; box-shadow:0 1px 2px rgba(13,34,51,.06),0 18px 40px -24px rgba(20,104,218,.55)} .usce-mi-land-say::after{content:"";position:absolute;right:-7px;bottom:10px;width:14px;height:14px;background:#fff;transform:rotate(45deg);border-radius:2px;box-shadow:3px -3px 6px -4px rgba(20,104,218,.25)} #usce-mi .usce-mi-land-report{grid-column:1/-1;grid-row:2} .usce-mi-land-line{position:relative;display:block;font:600 17px/1.45 var(--disp);color:var(--ink);text-wrap:pretty} /* While a line is typed, the longest line holds its room, so nothing below it moves. */ .usce-mi-land-ghost{visibility:hidden} .usce-mi-land-live{position:absolute;left:0;top:0;right:0} .usce-mi-land-say[data-speaker=you] .usce-mi-land-who{color:#1E8A5A} .usce-mi-land-say[data-speaker=you] .usce-mi-land-line{color:#41566B;font-weight:500} .usce-mi-land-say .usce-mi-land-again{position:absolute;right:14px;bottom:6px} #usce-mi .usce-mi-land-say button.is-link{min-height:36px;font-size:14px} /* The report: the feedback page's verdict, scores and stronger version, in one card. */ #usce-mi .usce-mi-land-report{margin:0;padding:24px clamp(20px,2.4vw,32px) 22px;border-radius:22px;color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(13,34,51,.05),0 40px 80px -40px rgba(20,104,218,.5)} .usce-mi-land-rhead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin:0 0 16px;padding:0 0 14px;border-bottom:1px solid #DCE6F8} #usce-mi .usce-mi-land-rtitle{margin:0;font:800 19px/1.25 var(--disp);color:var(--ink)} #usce-mi .usce-mi-land-rmeta{margin:2px 0 0;font-size:14px;color:var(--muted)} #usce-mi .usce-mi-land-report .usce-mi-verdict{margin:0 0 6px;font-size:24px} #usce-mi .usce-mi-land-sum{margin:0 0 16px;max-width:52ch;color:var(--text);font-size:15.5px} #usce-mi .usce-mi-land-skills{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px} #usce-mi .usce-mi-land-skills li{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0;padding:8px 0;border-bottom:1px solid #EEF3FB;font-size:14.5px;line-height:1.3;color:var(--text)} #usce-mi .usce-mi-land-skills .usce-mi-score{font-size:14px} .usce-mi-land-na{font-size:14px;color:var(--muted);font-weight:600} #usce-mi .usce-mi-land-report .usce-mi-better{margin:0 0 14px;max-width:none} #usce-mi .usce-mi-land-report .usce-mi-better p{font-size:15px;line-height:1.55} #usce-mi .usce-mi-land-rfoot{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0;font-size:13.5px;color:var(--muted)} .usce-mi-land-rfoot span{display:inline-flex;align-items:center;gap:6px} .usce-mi-land-rfoot svg{color:var(--lift)} /* Scoring: the dashes fill one after another, the verdict's dots with them. */ .usce-mi-land-report .usce-mi-score,.usce-mi-land-report .usce-mi-band{transition:--s .9s cubic-bezier(.16,1,.3,1),--on .9s cubic-bezier(.16,1,.3,1)} .usce-mi-land-skills li:nth-child(2) .usce-mi-score{transition-delay:.07s} .usce-mi-land-skills li:nth-child(3) .usce-mi-score{transition-delay:.14s} .usce-mi-land-skills li:nth-child(4) .usce-mi-score{transition-delay:.21s} .usce-mi-land-skills li:nth-child(5) .usce-mi-score{transition-delay:.28s} .usce-mi-land-skills li:nth-child(6) .usce-mi-score{transition-delay:.35s} .usce-mi-land-skills li:nth-child(7) .usce-mi-score{transition-delay:.42s} .usce-mi-land-skills li:nth-child(8) .usce-mi-score{transition-delay:.49s} .usce-mi-land-report .usce-mi-band{transition-delay:.55s} .usce-mi-land-report .usce-mi-better,.usce-mi-land-sum{transition:opacity .7s ease .6s,transform .9s cubic-bezier(.16,1,.3,1) .6s} #usce-mi .usce-mi-land-report.is-drain :is(.usce-mi-score,.usce-mi-band,.usce-mi-better,.usce-mi-land-sum){transition-duration:.25s;transition-delay:0s} #usce-mi .usce-mi-land-report.is-waiting .usce-mi-score{--s:0!important} #usce-mi .usce-mi-land-report.is-waiting .usce-mi-band{--on:0!important} #usce-mi .usce-mi-land-report.is-waiting :is(.usce-mi-better,.usce-mi-land-sum){opacity:.18;transform:translateY(6px)} /* The dark top (owner's comparison): the same composition on navy, the orb's far wires fading into it. */ .usce-mi-land[data-top=navy] .usce-mi-land-hero{background:var(--ink);color:#C9D6E6} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-hero h1{color:#fff} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-hero h1 em{color:#9ECBFF} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-lede{color:#C9D6E6} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-need{color:#9FB3C8} .usce-mi-land[data-top=navy] .usce-mi-land-need svg{color:#9ECBFF} .usce-mi-land[data-top=navy] .usce-mi-land-stage::before{background:linear-gradient(160deg,rgba(78,150,245,.16),rgba(78,150,245,.04) 70%)} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-hero a.usce-mi-button:not(.is-secondary){color:var(--ink);background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-hero a.usce-mi-button:not(.is-secondary):hover{background:var(--pale);filter:none} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-hero a.usce-mi-button.is-secondary{color:#fff;background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55)} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-hero a.usce-mi-button.is-secondary:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1.5px #fff} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-hero :focus-visible{outline-color:#9ECBFF} #usce-mi .usce-mi-land[data-top=navy] .usce-mi-land-report{box-shadow:0 2px 4px rgba(0,0,0,.2),0 44px 90px -40px rgba(0,0,0,.75)} .usce-mi-land[data-top=navy] .usce-mi-land-say{box-shadow:0 18px 40px -20px rgba(0,0,0,.55)} /* ---- how it works: three steps, each with the part of the app it happens in ---- */ #usce-mi .usce-mi-land-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);counter-reset:none} #usce-mi .usce-mi-land-step{position:relative;margin:0;display:flex;flex-direction:column} .usce-mi-land-num{display:grid;place-items:center;width:44px;height:44px;margin:0 0 18px;border-radius:50%;background:var(--ink);color:#fff;font:800 18px/1 var(--disp)} /* The steps join up: a line from each number to the next. */ .usce-mi-land-step:not(:last-child)::after{content:"";position:absolute;top:22px;left:60px;right:calc(-1 * clamp(24px,3vw,48px) + 16px);height:2px;background:repeating-linear-gradient(90deg,#B9CFF0 0 6px,transparent 6px 12px)} #usce-mi .usce-mi-land-step h3{margin:0 0 8px;font-size:22px;letter-spacing:-.012em} #usce-mi .usce-mi-land-step>p{margin:0 0 22px;color:#41566B;max-width:38ch} .usce-mi-land-art{margin-top:auto;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #DCE6F8,0 18px 36px -28px rgba(20,104,218,.55)} #usce-mi .usce-mi-land-art ul{list-style:none;margin:0;padding:0} #usce-mi .usce-mi-land-art li{display:flex;align-items:center;gap:10px;margin:0;padding:7px 0;font-size:14.5px;line-height:1.35;color:var(--text)} #usce-mi .usce-mi-land-art li+li{border-top:1px solid #EEF3FB} .usce-mi-land-art li svg{flex:none;color:var(--blue)} #usce-mi .usce-mi-land-art .usce-mi-land-artnote{margin:10px 0 0;font-size:13px;color:var(--muted)} .usce-mi-land-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px} .usce-mi-land-chip{padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px #C9D9F2;font:600 13px/1.25 var(--disp);color:var(--muted)} .usce-mi-land-chip.is-on{background:var(--blue);box-shadow:none;color:#fff} #usce-mi .usce-mi-land-art .usce-mi-land-time{margin-left:auto;font-size:13px;color:var(--muted);white-space:nowrap} #usce-mi .usce-mi-land-art .is-quiet{color:var(--muted)} #usce-mi .usce-mi-land-art .usce-mi-band{font-size:14px} .usce-mi-land-art .usce-mi-land-day-n{min-width:3.6em;font:700 13px/1.3 var(--disp);color:var(--muted)} /* ---- not general chat: one answer, two replies, then what is built in ---- */ /* The heading beside the example, then the built-in list across the whole width. */ .usce-mi-land-vs{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,4.5vw,64px) clamp(32px,4.5vw,80px);align-items:center} .usce-mi-land-vs>.usce-mi-land-built{grid-column:1/-1} #usce-mi .usce-mi-land-vshead .usce-mi-land-sub{margin-bottom:0} .usce-mi-land-example{position:relative;padding:26px clamp(20px,2.4vw,30px) 28px;border-radius:24px;background:#fff;box-shadow:0 0 0 1px #DCE6F8,0 30px 60px -40px rgba(20,104,218,.5)} .usce-mi-land-example>.usce-mi-land-tag{position:absolute;top:-12px;left:24px} .usce-mi-land-bubble{padding:14px 18px;border-radius:18px;background:var(--land-band)} #usce-mi .usce-mi-land-bubble p{margin:0;font:600 17px/1.45 var(--disp);color:var(--ink)} .usce-mi-land-you{margin:0 auto 0 0;max-width:30em;border-radius:18px 18px 18px 4px;background:#E9F7F0} .usce-mi-land-you .usce-mi-land-who{color:#1E7A50} .usce-mi-land-fork{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin-top:34px} /* The fork: one line down from your answer, splitting to the two replies. */ .usce-mi-land-fork::before{content:"";position:absolute;top:-26px;left:25%;right:25%;height:18px;border:2px solid #C9D9F2;border-bottom:0;border-radius:14px 14px 0 0} .usce-mi-land-fork::after{content:"";position:absolute;top:-34px;left:50%;width:2px;height:8px;background:#C9D9F2} .usce-mi-land-reply{display:flex;flex-direction:column;gap:10px} .usce-mi-land-reply .usce-mi-land-bubble{border-radius:18px 18px 18px 4px} .usce-mi-land-reply.is-chat .usce-mi-land-bubble{background:#F1F3F6} #usce-mi .usce-mi-land-reply.is-chat .usce-mi-land-bubble p{color:#3F4A57;font-weight:500} .usce-mi-land-reply.is-mm .usce-mi-land-bubble{background:var(--pale);box-shadow:inset 0 0 0 1.5px rgba(20,104,218,.3)} .usce-mi-land-reply.is-mm .usce-mi-land-who{color:var(--blue)} #usce-mi .usce-mi-land-note{margin:0;padding:0 4px;font-size:14px;line-height:1.45;color:var(--muted)} #usce-mi .usce-mi-land-exnote{margin-top:18px} .usce-mi-land-snip{padding:12px 4px 0;border-top:1px solid #DCE6F8} #usce-mi .usce-mi-land-snip p{margin:0 0 6px;font-size:14px;display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--ink);font-weight:600} #usce-mi .usce-mi-land-snip .usce-mi-label{margin:8px 0 4px} #usce-mi .usce-mi-land-snip ul{margin:0;padding-left:18px} #usce-mi .usce-mi-land-snip li{margin:3px 0;font-size:13.5px;line-height:1.45;color:var(--text)} /* The built-in list: a quiet table, the MatchMind column carrying the colour. */ .usce-mi-land-table{border-radius:24px;background:#fff;box-shadow:0 0 0 1px #DCE6F8;overflow:hidden} #usce-mi .usce-mi-land-table table{width:100%;margin:0;border-collapse:collapse;table-layout:fixed;font-size:15px;line-height:1.4} #usce-mi .usce-mi-land-table :is(th,td){padding:14px 16px;border:0;border-bottom:1px solid #EEF3FB;text-align:left;vertical-align:middle;background:none;white-space:normal} #usce-mi .usce-mi-land-table thead th{padding-top:18px;padding-bottom:12px;font:700 14px/1.3 var(--disp);letter-spacing:0;text-transform:none;color:var(--muted);border-bottom:1px solid #DCE6F8} #usce-mi .usce-mi-land-table thead th:first-child{width:58%} .usce-mi-land-short{display:none} #usce-mi .usce-mi-land-table tbody th{font-weight:600;color:var(--ink);padding-left:22px} #usce-mi .usce-mi-land-table tr>:is(th,td):last-child{background:rgba(234,241,252,.55);padding-right:22px} #usce-mi .usce-mi-land-table thead th:last-child{color:var(--blue)} #usce-mi .usce-mi-land-table tbody tr:last-child>*{border-bottom:0} .usce-mi-land-no{color:var(--muted);font-size:14px;white-space:nowrap} .usce-mi-land-yes{display:inline-flex;align-items:center;gap:7px;color:var(--blue);font-weight:700;font-size:14px;white-space:nowrap} #usce-mi .usce-mi-land-table+p{margin:14px 4px 0;max-width:60ch} /* ---- the interview day: four stops along one line ---- */ #usce-mi .usce-mi-land-day{list-style:none;position:relative;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)} .usce-mi-land-day::before{content:"";position:absolute;top:9px;left:9px;right:0;height:2px;background:linear-gradient(90deg,var(--blue),#9ECBFF 75%,rgba(158,203,255,.25));transform-origin:0 50%;transition:transform 1.4s cubic-bezier(.16,1,.3,1)} #usce-mi .usce-mi-land-day>li{position:relative;margin:0;padding:38px 0 0} .usce-mi-land-day>li::before{content:"";position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 5px var(--blue),0 0 0 5px #fff;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s} .usce-mi-land-day>li.is-optional::before{box-shadow:inset 0 0 0 2px var(--blue),0 0 0 5px #fff} #usce-mi .usce-mi-land-role{margin:0 0 6px;font:800 20px/1.25 var(--disp);color:var(--ink)} .usce-mi-land-role span{margin-left:6px;vertical-align:2px} #usce-mi .usce-mi-land-focus{margin:0 0 16px;font-size:15px;color:var(--muted)} #usce-mi .usce-mi-land-ask{margin:0;padding:0;border:0;background:none;font:600 17px/1.45 var(--disp);color:var(--ink);text-wrap:pretty} #usce-mi .usce-mi-land-ask::before{content:none} #usce-mi .usce-mi-land-facts{display:flex;flex-wrap:wrap;gap:14px 32px;margin:clamp(40px,5vw,64px) 0 0;padding:24px 0 0;border-top:1px solid #DCE6F8;list-style:none} #usce-mi .usce-mi-land-facts li{display:flex;gap:10px;align-items:flex-start;margin:0;max-width:44ch;font-size:15px;line-height:1.45;color:var(--text)} .usce-mi-land-facts svg{flex:none;margin-top:1px;color:var(--blue)} /* Arriving: the line draws itself, then each stop lands on it. */ .usce-mi-land-day.is-pending::before{transform:scaleX(0)} .usce-mi-land-day.is-pending>li::before{transform:scale(0);opacity:0} .usce-mi-land-day>li:nth-child(2)::before{transition-delay:.25s} .usce-mi-land-day>li:nth-child(3)::before{transition-delay:.5s} .usce-mi-land-day>li:nth-child(4)::before{transition-delay:.75s} /* The two replies arrive one after the other, the way a conversation would. */ .usce-mi-land-fork>*{transition:opacity .6s ease,transform .8s cubic-bezier(.16,1,.3,1)} .usce-mi-land-fork>.is-mm{transition-delay:.7s} .usce-mi-land-example.is-pending .usce-mi-land-fork>*{opacity:0;transform:translateY(14px)} /* ---- good to know ---- */ .usce-mi-land-faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,96px);align-items:start} #usce-mi .usce-mi-land-qs details{margin:0;border-bottom:1px solid #DCE6F8} #usce-mi .usce-mi-land-qs details:first-child{border-top:1px solid #DCE6F8} #usce-mi .usce-mi-land-qs summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 4px;cursor:pointer;list-style:none;font:700 18px/1.35 var(--disp);color:var(--ink)} #usce-mi .usce-mi-land-qs summary::-webkit-details-marker{display:none} #usce-mi .usce-mi-land-qs summary::before{content:none;display:none} #usce-mi .usce-mi-land-qs summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:var(--pale) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231468DA' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 7v10M7 12h10'/%3E%3C/svg%3E") center/18px no-repeat;transition:transform .3s cubic-bezier(.2,.8,.2,1)} #usce-mi .usce-mi-land-qs details[open] summary::after{transform:rotate(45deg)} #usce-mi .usce-mi-land-qs summary:hover{color:var(--blue)} #usce-mi .usce-mi-land-qs details p{margin:0;padding:0 44px 20px 4px;color:#41566B;max-width:68ch} /* ---- join ---- */ #usce-mi .usce-mi-land-forms{align-items:start} #usce-mi .usce-mi-land-fine{width:calc(100% - 2 * var(--gutter));max-width:var(--land-max);margin:0 auto;padding:28px 0 8px;font-size:13.5px;line-height:1.55;color:var(--muted)} #usce-mi .usce-mi-land-fine p{margin:0;max-width:110ch} #usce-mi .usce-mi-land-fine p+p{margin-top:10px} /* ---- motion off: everything is already in place ---- */ @media (prefers-reduced-motion:reduce){ .usce-mi-land *{transition:none!important} } /* ---- smaller screens ---- */ @media (max-width:1180px){ .usce-mi-land-hero>.usce-mi-land-in{grid-template-columns:minmax(0,1fr)} .usce-mi-land-copy{max-width:640px} .usce-mi-land-stage{max-width:860px} .usce-mi-land-stage::before{left:-20px;right:-20px} .usce-mi-land-vs{grid-template-columns:minmax(0,1fr)} #usce-mi .usce-mi-land-day{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px} .usce-mi-land-day::before{display:none} } @media (max-width:900px){ #usce-mi .usce-mi-land-steps{grid-template-columns:minmax(0,1fr);gap:40px} .usce-mi-land-step:not(:last-child)::after{display:none} .usce-mi-land-art{margin-top:0;max-width:460px} .usce-mi-land-faq{grid-template-columns:minmax(0,1fr)} } @media (max-width:640px){ .usce-mi-land{--orb:clamp(96px,28vw,132px)} .usce-mi-land-hero{padding-top:16px} #usce-mi .usce-mi-land-hero h1{font-size:clamp(34px,9vw,40px);margin-bottom:14px} #usce-mi .usce-mi-land-lede{margin-bottom:22px} #usce-mi .usce-mi-land-need{margin-top:14px} #usce-mi .usce-mi-land-lede,#usce-mi .usce-mi-land-sub{font-size:17px} #usce-mi .usce-mi-land-hero .usce-mi-actions>*{flex:1 1 100%} .usce-mi-land-stage::before{left:-12px;right:-12px;border-radius:24px} .usce-mi-land-stage{gap:16px 10px;padding-right:0} .usce-mi-land-say{padding:12px 14px;border-radius:16px 16px 4px 16px} .usce-mi-land-line{font-size:15px} /* The scores two by two, each name over its dashes. */ #usce-mi .usce-mi-land-skills{gap:0 16px} #usce-mi .usce-mi-land-skills li{flex-direction:column;align-items:flex-start;justify-content:space-between;gap:4px;font-size:13.5px} #usce-mi .usce-mi-land-skills .usce-mi-score{font-size:13px} .usce-mi-land-rhead{flex-direction:column;gap:8px} .usce-mi-land-fork{grid-template-columns:minmax(0,1fr);margin-top:22px} .usce-mi-land-fork::before,.usce-mi-land-fork::after{display:none} #usce-mi .usce-mi-land-day{grid-template-columns:minmax(0,1fr);row-gap:28px} #usce-mi .usce-mi-land-day>li{padding-top:30px} #usce-mi .usce-mi-land-ask{font-size:16px} /* The built-in list stays a table: short column names, a dash or a tick. */ #usce-mi .usce-mi-land-table thead th:first-child{width:auto} #usce-mi .usce-mi-land-table :is(thead th:not(:first-child),td){width:84px;padding-left:4px;padding-right:8px;text-align:center} #usce-mi .usce-mi-land-table td{font-size:12px;line-height:1.3} .usce-mi-land-table td .usce-mi-land-yes{flex-direction:column;gap:2px} #usce-mi .usce-mi-land-table :is(th,td){padding-top:12px;padding-bottom:12px} #usce-mi .usce-mi-land-table tbody th{padding-left:16px;font-size:14.5px} #usce-mi .usce-mi-land-table thead th{font-size:12.5px} .usce-mi-land-table thead .usce-mi-land-long{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} .usce-mi-land-table thead .usce-mi-land-short{display:inline} #usce-mi .usce-mi-land-qs summary{font-size:17px} #usce-mi .usce-mi-land-qs details p{padding-right:4px} }