/* Hallmark · shape: illustrated order brief · genre: modern-minimal · theme: Teabowl brand · job: try · signature: the actual marked order beside its purchasing decision · v2.0.0 */
/* Hallmark · pre-emit critique: one readable document, one decision and a single path into the working desk */
/* Hallmark · waive 59 · the dark consultation band separates this order brief from its footer · the buyer can see the next step without scrolling through an empty band */
/* Hallmark · waive 77 · each order brief has exactly two document checks below the sample · expanding those two checks into a landing page would repeat the evidence */
:root{--paper:var(--tb-paper);--ink:var(--tb-ink);--navy:var(--tb-navy);--text:var(--tb-text);--muted:var(--tb-muted);--line:var(--tb-rule);--blue:var(--tb-blue);--active:var(--tb-hover);--focus:var(--tb-focus);--pale:var(--tb-pale);--mat:#e4e9ef;--sans:var(--tb-sans);--display:var(--tb-display);--latin:var(--tb-latin);--gutter:clamp(20px,5vw,68px);--gap:clamp(32px,5vw,72px)}
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;color:var(--text);background:var(--paper);font:16px/1.8 var(--sans);line-break:strict}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
a{color:var(--blue);text-underline-offset:.24em}a:hover{color:var(--active)}a:active{opacity:.85}
.wrap,.tb-shell{width:min(1160px,calc(100% - 2 * var(--gutter)));margin-inline:auto}
.skip{position:absolute;top:-80px;padding:8px 16px;background:var(--paper);z-index:3}.skip:focus{top:4px;left:8px}
h1,h2,h3,p,figure,ol{margin:0}h1,h2,h3{min-width:0;overflow-wrap:break-word;color:var(--ink)}
.trail{display:flex;align-items:center;gap:12px;padding-top:24px;font-size:14px;color:var(--muted)}.trail a{color:inherit}
.lead-band{border-bottom:1px solid var(--line)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);align-items:center;gap:var(--gap);padding:clamp(24px,3vw,48px) 0 clamp(40px,5.4vw,76px)}
h1,h2{font-family:var(--display);font-weight:600;line-height:1.45}
h1{font-size:clamp(32px,3.65vw,56px);letter-spacing:-.035em}
h1 span{display:block;text-wrap:balance}
.copy>p{max-width:32em;margin:20px 0 24px}
.action{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 24px;background:var(--blue);border-radius:3px;color:var(--paper);text-decoration:none;font-weight:650}
.action:hover{background:var(--active);color:var(--paper)}
.copy small{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
.hero figure{min-width:0;padding:clamp(12px,2.2vw,32px);background:var(--mat);border-top:3px solid var(--navy)}
.hero img{display:block;width:100%;height:auto}
figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font-size:13px;color:var(--muted)}
figcaption span:last-child{font-family:var(--latin);font-variant-numeric:tabular-nums}
figcaption a:focus-visible{outline-color:var(--blue)}
.checks,.consult>.wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:var(--gap);padding-block:clamp(40px,5.3vw,76px)}
h2{font-size:clamp(30px,3.65vw,52px)}ol{list-style:none;padding:0}
.checks li{display:grid;grid-template-columns:minmax(100px,.52fr) minmax(0,1.48fr);gap:24px;border-top:1px solid var(--line);padding:20px 0}.checks li:last-child{border-bottom:1px solid var(--line)}
.checks h3{font:650 15px/1.75 var(--sans)}.checks strong{font-size:clamp(19px,1.6vw,24px);color:var(--navy);font-variant-numeric:tabular-nums}.checks p,.consult p{margin:4px 0 0;font-size:15px}
.consult{background:var(--navy);color:var(--paper)}.consult>.wrap{grid-template-columns:minmax(0,1.6fr) minmax(0,.4fr);align-items:center;padding-block:32px}
.consult h2{color:inherit;font:650 clamp(19px,1.55vw,23px)/1.5 var(--sans)}.consult a{justify-self:end;white-space:nowrap;color:inherit;font-weight:650}
footer.wrap{display:flex;gap:12px 24px;align-items:center;flex-wrap:wrap;padding-block:24px;font-size:14px}footer span{margin-left:auto;color:var(--muted)}
@media(min-width:851px){.hero{min-height:clamp(588px,72svh,668px)}.checks{padding-top:36px}}
@media(max-width:850px){.hero,.checks,.consult>.wrap{grid-template-columns:minmax(0,1fr)}.hero{gap:24px}.hero figure{max-width:570px}.checks{gap:20px}.checks h2 br{display:none}.consult>.wrap{gap:12px}.consult a{justify-self:start}.trail{padding-top:16px}h1{font-size:clamp(30px,6vw,46px)}}
@media(max-width:550px){.tb-shell{width:calc(100% - 32px)}.tb-mast .examples-link{display:none}.copy>p{margin:16px 0 20px}.checks li{grid-template-columns:minmax(0,1fr);gap:4px}.hero figcaption{font-size:12px}.hero{padding-top:20px}.checks h3{color:var(--muted)}footer span{margin-left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none;transition:none;scroll-behavior:auto}}