/* Shared interface rhythm. Physical certificate and ID artwork is canvas-rendered. */
@layer ux;
@layer ux {
 :root{--muted:#526a77}
 .wrap{width:min(1200px,calc(100% - 64px))}
 .site-header{z-index:20}
 .header-inner,.home-page .header-inner{min-height:84px;height:auto;padding-block:14px;gap:24px}
 .site-header nav{gap:26px;font-size:15px}
 .site-header nav a,.contact-link{display:inline-flex;align-items:center;min-height:44px}
 .site-header nav a:hover{text-decoration:underline;text-underline-offset:7px}
 :where(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #007d86;outline-offset:4px}
 :where(section,[id]){scroll-margin-top:110px}
 input:not([type=checkbox],[type=radio],[type=range]),select,textarea{font-size:16px;line-height:1.5}
 .field-help,.small-note,.privacy-note,.disclosure{font-size:13px;line-height:1.8;color:#526a77}
 .eyebrow,.footer-label{font-size:12px;line-height:1.6;letter-spacing:.1em}
 .back-link{font-size:14px;min-height:44px;display:inline-flex;align-items:center}
 .tool-intro{padding-block:24px 36px}
 .tool-intro h1{font-size:clamp(34px,4.5vw,56px);line-height:1.12;max-width:1000px}
 .tool-intro .lead{font-size:18px;line-height:1.7;max-width:800px}
 .tool-shell{padding:32px;border-radius:16px}
 .tool-after{gap:24px}
 .tool-form label,.timer-settings label{font-size:15px}
 .timer-presets button{min-height:44px;font-size:14px}
 .footer-main{gap:48px;padding-block:56px}
 .footer-main a,.footer-main p,.footer-note,.footer-bottom{font-size:14px;line-height:1.8}
 .footer-main a{padding-block:3px}
 .text-link{font-size:14px}
 .tt-kicker{font-size:11px;letter-spacing:.11em;color:#496871}
 .tt-hero{background-color:#f3f8f7;background-image:radial-gradient(ellipse at 82% 42%,#dcece780,transparent 52%)}
 .tt-hero-grid{grid-template-columns:1.05fr 1fr;gap:30px;padding-block:40px 32px;min-height:500px}
 .tt-hero h1{font-size:clamp(46px,5.3vw,70px);letter-spacing:-.055em;line-height:1.08;margin-top:23px}
 .tt-hero-copy>p{font-size:18px;line-height:1.75;max-width:490px;margin-top:24px;color:#506e76}
 .tt-hero-art{margin:0;position:relative;min-width:0;isolation:isolate}
 .tt-hero-art:before{content:'';position:absolute;inset:12% 3% 5%;border-radius:50%;background:radial-gradient(ellipse,#d4e6db90,transparent 70%);z-index:-1}
 .tt-hero-art picture,.tt-hero-art img{display:block;width:100%;height:auto}
 .tt-hero-art img{filter:drop-shadow(0 20px 24px #234d4810)}
 .tt-hero .button.primary{font-size:15px;min-height:52px;padding:14px 20px}
 .tt-app-link{font-size:14px;min-height:44px}
 .tt-hero-links{font-size:13px;gap:6px 13px;margin-top:20px}
 .tt-hero-links>a{min-height:34px;display:inline-flex;align-items:center}
 .tt-hero-assurance{font-size:13px;line-height:1.65;max-width:440px;margin-top:20px;color:#526f76}
 .tt-hero-bottom{font-size:11px;color:#57747b;padding-block:16px}
 .tt-hero-bottom>a{font-size:12px}
 .tt-tool-section,.tt-guides{padding-block:64px}
 .tt-section-top{margin-bottom:30px;gap:32px}
 .tt-section-top>p{font-size:16px;line-height:1.75;color:#526b76;max-width:360px}
 .tt-section-top>.text-link{font-size:14px;min-height:44px;align-items:center}
 .tt-tool-nav button{font-size:14px;min-height:44px;padding:10px 16px}
 .tt-tool-nav button>span{font-size:11px;width:20px;height:20px}
 .tt-tool-nav>span{font-size:13px;color:#526b76}
 .home-page .tt-live-grid .free-card{padding:27px;min-height:310px}
 .home-page .tt-live-grid .free-card h3{font-size:25px;line-height:1.18}
 .home-page .tt-live-grid .free-card p{font-size:15px;line-height:1.75;color:#526b76}
 .home-page .tt-live-grid .free-card .tool-kicker{font-size:11px;color:#526f79}
 .home-page .tt-live-grid .free-card .coming-label{font-size:10px;padding:6px 9px}
 .home-page .tt-live-grid .free-card .text-link{font-size:14px}
 .tt-private-line,.tt-private-line p,.tt-private-line>a{font-size:13px;color:#526f79}
 .tt-app-section{padding-block:64px}
 .home-page .tt-app-section .product-actions .button{font-size:14px}
 .tt-building-strip .tt-kicker,.tt-story-band .tt-kicker{font-size:11px}
 .tt-building-strip small{font-size:12px;line-height:1.65;color:#5e7783}
 .home-page .tt-guides .magazine-card p{font-size:15px;line-height:1.75;color:#526b76}
 .home-page .tt-guides .magazine-card .article-card-top,.home-page .tt-guides .magazine-card .article-card-bottom{font-size:13px}
 .home-page .tt-guides .blog-tags>span{font-size:12px;color:#446772}
 .tt-next-grid>div>p,.tt-story-band p{font-size:16px;line-height:1.8;color:#526e68}
 .tt-next-grid>div>.text-link,.tt-story-band .button{font-size:14px}
 .tt-planned-grid p{font-size:15px;color:#58736c}
 .tt-planned-grid article>a{display:inline-flex;font-size:14px;line-height:1.6;margin-top:16px;min-height:44px;align-items:center;color:#246b60}
 .blog-page .blog-card-copy p{font-size:15px;line-height:1.75}
 .blog-page .article-card-top,.blog-page .article-card-bottom,.blog-tags>span,.blog-tags a{font-size:12px}
 .magazine-feature p,.editor-picks>p{font-size:15px;line-height:1.75;color:#526b76}
 .magazine-feature span,.magazine-feature strong,.editor-picks small,.magazine-byline{font-size:13px}
 .journal-desk span,.blog-library>#blog-count,.blog-library-heading a,.magazine-intro a{font-size:13px;color:#526b76}
 .magazine-article .article-toc ol{font-size:14px;line-height:1.7}
 .magazine-article .article-actions button,.article-social-share a,.article-social-share button{font-size:13px;min-height:44px;display:inline-flex;align-items:center}
 .blog-controls label{font-size:14px}
 .blog-filters button,.blog-filter button,.blog-search input{font-size:15px;min-height:44px}
 .article-meta,.article-byline,.article-sources{font-size:14px}
 .article-toc a{font-size:14px;line-height:1.65}
 .office-controls{padding:28px}
 .office-preview-jump{display:none}
 .office-controls label,.office-controls legend{font-size:14px;line-height:1.6}
 .office-controls input:not([type=checkbox],[type=radio],[type=range]),.office-controls select,.office-controls textarea{font-size:16px;min-height:46px}
 .office-controls .field-help,.office-controls .checkbox-label,.office-controls .form-error{font-size:13px;line-height:1.75}
 .office-small,.office-profile-actions button,.office-preview-tabs button,.office-export-bar .button{font-size:13px;min-height:44px}
 .office-token-list button{font-size:12px;min-height:34px;padding:7px 10px}
 .office-controls details>summary{font-size:15px;padding-block:10px;line-height:1.6}
 .office-controls summary small{font-size:12px;line-height:1.65}
 .office-readiness,.office-privacy,.office-preview>.field-help,.office-text-preview{font-size:13px;color:#526e7a}
 .office-empty p{font-size:15px;line-height:1.8;color:#526e7a}
 .office-empty>span,.office-paper-badge{font-size:11px!important}
 .office-explainer p{font-size:16px;line-height:1.8}
 .office-explainer a{font-size:14px}
 .id-health p,.id-review,.id-people-detail summary,.id-sheets summary,.id-page-nav span{font-size:14px}
 .id-person strong,.id-person select{font-size:13px}
 .id-person small{font-size:12px;color:#526d7a}
 .id-template-name{font-size:14px}
 .id-template-name small{font-size:11px}
 .id-template-description,.id-template-gallery>p{font-size:12px;line-height:1.7;color:#526d7a}
 .service-main p,.service-stats span,.service-stats small,.service-retirement small,.service-workspace .office-preview .field-help{font-size:13px;line-height:1.7}
 .service-retirement p{font-size:15px;line-height:1.75}
 .pay-controls label{font-size:15px}
 .pay-controls input,.pay-controls select{font-size:16px}
 .pay-controls .field-help{font-size:13px;line-height:1.75}
 .pay-controls,.pay-controls fieldset,.pay-controls .form-row>div{min-width:0}
 .pay-mode button{min-width:0;white-space:normal}
 .studio-mast p{font-size:16px}
 .studio-mast>span,.studio-login p{font-size:14px}
 .studio-login label,#studio-editor label{font-size:14px}
 .studio-login input,#studio-editor input:not([type=checkbox]),#studio-editor select,#studio-editor textarea{font-size:16px}
 .studio-login button,.studio-toolbar .button,.studio-toolbar .office-small{font-size:13px;min-height:44px}
 .studio-toolbar span,.studio-toolbar #studio-state{font-size:12px}
 .studio-panel summary{font-size:15px}
 .studio-panel>p,.studio-help p,.studio-block-heading span,.studio-block-top strong{font-size:13px;line-height:1.75}
 .studio-block-top button{font-size:12px;min-width:34px;min-height:36px}
 .studio-block textarea{font-size:16px!important;line-height:1.8}
 .studio-add-block button{font-size:14px;min-height:44px}
 .studio-help strong{font-size:15px}
 .image-privacy p,.image-privacy small,.image-picker>div p,.image-settings .field-help,.image-actions button span,.image-result>p,.image-local-note,.image-offline-help{font-size:13px;line-height:1.75}
 .image-presets button,.image-file-row>button,.image-file-row>a{font-size:13px;min-height:44px}
 .image-file-row>span,.image-previews figcaption span{font-size:12px}
 .image-settings input,.image-settings select{font-size:16px}
 @media(max-width:1000px){
  .tt-hero-grid{gap:20px;min-height:500px;padding-block:40px}
  .tt-hero h1{font-size:clamp(43px,5.5vw,60px)}
  .tt-hero-actions{gap:14px;margin-top:24px}
  .office-workspace{grid-template-columns:minmax(300px,.95fr) minmax(0,1.05fr)}
 }
 @media(max-width:760px){
  .wrap{width:calc(100% - 40px)}
  .header-inner,.home-page .header-inner{flex-wrap:wrap;gap:5px 20px;padding-block:13px;min-height:80px}
  .site-header nav{order:3;width:100%;justify-content:space-between;gap:8px;font-size:14px}
  .site-header nav a{min-height:38px}
  .contact-link{margin-left:auto;font-size:13px}
  .tool-shell{padding:24px}
  .office-workspace{grid-template-columns:1fr}
  .office-preview-jump{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:#006d78;text-decoration:underline;text-underline-offset:4px;margin-bottom:14px}
  .pay-workspace{grid-template-columns:minmax(0,1fr)}
  .tt-hero-grid{grid-template-columns:1fr;gap:0;padding-top:32px;padding-bottom:18px;min-height:0}
  .tt-hero-copy{padding:0}
  .tt-hero h1{font-size:clamp(43px,8vw,60px);margin-top:18px}
  .tt-hero-copy>p{font-size:17px;line-height:1.7;margin-top:20px;max-width:560px}
  .tt-hero-actions .tt-app-link{display:flex}
  .tt-hero-art{width:min(450px,88%);margin:14px auto -3px}
  .tt-hero-links{font-size:13px;margin-top:14px}
  .tt-hero-assurance{margin-top:12px;font-size:12px}
  .tt-hero-bottom{display:none}
  .tt-tool-section,.tt-guides,.tt-app-section{padding-block:44px}
  .tt-section-top{align-items:start;flex-direction:column;gap:20px}
  .tt-section-top>p{font-size:16px;max-width:560px}
  .tt-live-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .home-page .tt-live-grid .free-card{padding:24px;min-height:310px}
  .tt-story-band{padding-block:44px}
  .office-preview-top{gap:12px}
  .footer-main{gap:32px;padding-block:42px}
 }
 @media(max-width:580px){
  .wrap{width:calc(100% - 32px)}
  .site-header .contact-link{display:none}
  .header-inner,.home-page .header-inner{gap:8px;min-height:0}
  .brand-symbol{width:38px;height:38px}
  .tt-hero h1{font-size:clamp(40px,10.7vw,56px)}
  .tt-hero-actions{gap:8px 18px}
  .tt-hero .button.primary{font-size:14px}
  .tt-hero-actions .tt-app-link{font-size:13px}
  .tt-hero-links{gap:4px 9px;font-size:12px}
  .tt-hero-links,.tt-hero-actions .tt-app-link{display:none}
  .tt-hero-art{width:min(340px,82%);margin-top:14px}
  .tt-live-grid{grid-template-columns:1fr}
  .home-page .tt-live-grid .free-card{min-height:0;padding:26px}
  .home-page .tt-live-grid .free-card .free-card-top{margin-bottom:20px}
  .home-page .tt-live-grid .free-card h3{font-size:27px}
  .tt-tool-nav button{font-size:13px;padding:9px 13px}
  .tt-private-line>a{margin-left:26px}
  .tt-building-strip,.tt-planned-grid{grid-template-columns:1fr}
  .tt-building-strip>div{grid-column:auto}
  .tt-tool-section .tt-section-top h2,.tt-section-top h2{font-size:36px}
  .tool-shell{padding:20px 16px;border-radius:12px}
  .tool-intro{padding-block:20px 28px}
  .tool-intro .lead{font-size:16px}
  .office-controls{padding:22px 18px}
  .office-controls .form-row,.studio-meta-grid{grid-template-columns:1fr;gap:0}
  .pay-controls .form-row{grid-template-columns:minmax(0,1fr);gap:14px}
  .pay-total-top{flex-wrap:wrap}
  .office-preview-top{align-items:start;flex-direction:column}
  .office-explainer{margin-top:32px;padding-block:32px}
  .studio-block-top{flex-wrap:wrap}
  .studio-block-top strong{width:100%}
  .footer-bottom{align-items:start;gap:16px;flex-direction:column}
 }
 @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
}
/* These controls are outside the site's named cascade layers. */
.result-share-launch{font-size:14px!important;min-height:46px}
.result-share-settings label{font-size:14px}
.result-share-settings input:not([type=checkbox]),.result-share-settings textarea,.result-share-settings select{font-size:16px}
.result-share-settings .field-help,.result-share-settings [data-status]{font-size:13px;color:#4c6b62}
.result-share-export button,.result-share-export>a{font-size:14px;min-height:44px}
.image-privacy p,.image-privacy small,.image-picker>div p,.image-settings .field-help,.image-actions button span,.image-result>p,.image-local-note,.image-offline-help{font-size:13px;line-height:1.75}
.image-presets button,.image-file-row>button,.image-file-row>a{font-size:13px;min-height:44px}
.image-settings input:not([type=checkbox],[type=range]),.image-settings select{font-size:16px}
@media(max-width:480px){.result-share-settings .form-row{grid-template-columns:1fr}.result-share-dialog{padding:18px}}
